html - 如何使 html 页面显示来自另一个 url 的内容

Question

我想制作一个类似于 google 缓存的 html 页面。

比如说在我的主页HOME，我有一个链接A到一个网站B，当我点击A时，出来的页面会显示另一个页面的内容，顶部有一个浮动条，有一些我自己选择的功能.

例如，我希望我的链接显示 google.com，但我还想向该 google.com 添加一个按钮（浮动条，任何东西），以便在按下时返回我自己的网页。

有人可以为我提供一些有用的资源，或者更好的解决方案模板吗？:)

谢谢！

score 7 · Accepted Answer

您可以使用 an<iframe>来在您的网页中显示外部网页。只需将要显示的网页的网址放在src属性的引号内即可。

<iframe src="http://www.webpage.com" width="400" height="400"></iframe>

score 7 · Accepted Answer

iframe 听起来可能是您需要的，但在阅读了您的描述后，我不确定 100%。iframe 将在您的页面中显示来自另一个 URL 的内容。一旦你有了这些，你需要做的就是设置页面样式并使用 CSS/JavaScript 来添加描述的功能。

score 3 · Accepted Answer

这是一般的想法：

HTML：

<a href="#" id="link">Click Here</a>
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>

一些 jQuery（未测试）：

$(document).ready(function() {
    $('#frame').hide();

    $('#link').click(function () {
        $('#frame').show();
    })
})

根据需要设置样式

注意- 这个答案绝不支持 w3schools.com :-)。请参阅w3fools.com/

score 3 · Accepted Answer

要么使用 iframe，要么通过 AJAX 将站点加载到 div 中（例如使用 jQuerysload()方法）。

score 0 · Accepted Answer

我发现 Kevin Gourney 的回答是最直接和最有帮助的。我正在使用它来解决 Adobe Spark 的域限制，并创建了一个简单的单行 index.html 文件并调整代码如下：

<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>

5 回答 5