使用 ajax 在 IFRAME 中加载页面答案

【问题标题】：Load the page inside of IFRAME using ajax使用 ajax 在 IFRAME 中加载页面
【发布时间】：2015-03-31 22:37:29
【问题描述】：

如何使用 IFRAME 加载您的页面？我在想这是否可能..

例如，我在下面有这个 iframe。

<iframe id="iframe" width="1024" height="600" src="http://www.sample.com"></iframe>

我希望 www.sample.com 页面在此 iframe 中加载，而不是简单地将 URL 添加到 src 属性中，而是获取当前页面数据使用 ajax 并使用 IFRAME 标签加载。我正在考虑这个问题，因为我大部分时间在 IFRAME 缓存上都有一个大问题。

我也尝试过这个东西，但它对我来说并不完美。

<iframe id="iframe" width="1024" height="600" src="http://www.sample.com?random=1422841682605""></iframe>

random 每次加载此 iframe 时都会发生变化。

我想将它应用到我的响应式工具上，如下图所示。如果您需要实际视图click here。

谢谢大家，如果有什么想法。

【问题讨论】：

如果 www.sample.com 与您的 iframe 页面不是同一个域，则不能只使用 AJAX。
谢谢sideroxylon..但是有没有办法防止iframe cahce？你有什么想法吗？

标签： javascript jquery html ajax iframe

【解决方案1】：

您仍然可以使用 src，但提供如下数据 URL：

src = 'data:text/html;charset=utf-8,' + 
    encodeURIComponent( // Escape for URL formatting
        '<!DOCTYPE html>'+
        '<html lang="en">'+
        '<body><h1>Another document!</h1></body>'+
        '</html>'
    );

【讨论】：

谢谢先生..但我对这段代码感到困惑。你能给我更多提示，以便我可以在我的代码中应用它吗？
通过使用ajax，您可以请求您需要显示的页面的html。当您收到该页面的 html 时，只需执行以下操作：src = 'data:text/html;charset=utf-8,' + encodeURIComponent( thatHtml );
先生，请查看我上面更新的问题，以获取更多示例。您的任何帮助将不胜感激。

【解决方案2】：

您可以通过几种不同的方法使用 Javascript 更改 iframe 的位置。

var frame = document.getElementById("iframe");
frame.src = "http://www.sample.com";
frame.contentWindow.location = "http://www.sample.com";
frame.contentWindow.open("http://www.sample.com");

当然，您必须非常小心使用 iframe。如果 iframe 指向外部域（即：“Cross-Origin”，即：与托管主网页的域不同），您将违反浏览器安全策略，并且如果您尝试操纵/阅读许多内容，则会引发错误属性。

另请注意，通过更改 iframe 元素的 src 属性，iframe 将自动移动到新位置。但是，如果您使用我建议的其他两种方法之一，则 iframe 元素的 src 属性不会更改（即使 iframe 的内容指向新位置）。

如果需要获取iframe的位置，可以试试：

iframe.contentWindow.location.href;

同样，如果 iframe 指向的站点不在同一个域中，则会导致错误。为了安全起见，请使用try {} catch (e) {} 块。

【讨论】：

我尝试使用您的代码，但我找不到它在我的最终工作。我在上面更新了我的问题，希望这对你和我都有帮助。
不使用 AJAX

【解决方案3】：

请务必在链接前使用“http://”，例如：

<iframe src="http://www.google.com"></iframe>

【讨论】：

对不起，我忘记在我的代码中添加 http:// 但我已经在我的 iframe src 上。

【解决方案4】：

如果www.sample.com 在同一个域中，您可以这样做：

<div id = "targetDiv"></div>
<script>
$('document').ready(function() {
    $('#targetDiv').load('www.sample.com');
});
</script>

不过，如果是同一个域，您可能会使用.load('/');

【讨论】：

不，先生..两者的域名不同。
那么 AJAX 不是你的朋友。
不使用 iframe