Question

如何使用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>

每次加载此iframe时，

随机都会发生变化。

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

enter image description here

谢谢你们，如果有一些想法那么。

Answer 1

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

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

Answer 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) {}块。

Answer 3

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

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

Answer 4

如果www.sample.com位于同一个域中，您可以执行以下操作：

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

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

使用ajax在IFRAME中加载页面

4 个答案: