使用 ajax 在 IFRAME 中加载页面
Posted
技术标签:
【中文标题】使用 ajax 在 IFRAME 中加载页面【英文标题】：Load the page inside of IFRAME using ajax 【发布时间】：2015-03-31 22:37:29 【问题描述】：如何使用 IFRAME 加载您的页面？我在想这是否可能..
例如，我在下面有这个 iframe。
<iframe id="iframe" src="http://www.sample.com"></iframe>
我希望 www.sample.com 页面在此 iframe 中加载，而不是简单地将 URL 添加到 src 属性中，而是获取当前页面数据使用 ajax 并使用 IFRAME 标签加载。我正在考虑这个问题，因为我大部分时间在 IFRAME 缓存上都有一个大问题。
我也尝试过这个东西，但它对我来说并不完美。
<iframe id="iframe" src="http://www.sample.com?random=1422841682605""></iframe>
random 每次加载此 iframe 时都会发生变化。
我想将它应用到我的响应式工具上，如下图所示。如果您需要实际视图click here。
谢谢大家，如果有什么想法。
【问题讨论】：
如果 www.sample.com 与您的 iframe 页面不是同一个域，则不能只使用 AJAX。 谢谢sideroxylon..但是有没有办法防止iframe cahce？你有什么想法吗？ 【参考方案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以上是关于使用 ajax 在 IFRAME 中加载页面的主要内容，如果未能解决你的问题，请参考以下文章
不要同时在 Owl Carousel 中加载所有 iFrame