Javascript 使用 ajax 在 IFRAME 中加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28270008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load the page inside of IFRAME using ajax
提问by Anthony Carbon
how about loading your page using IFRAME ? I was thinking if this is possible ..
如何使用 IFRAME 加载您的页面？我在想这是否可能..
Example, i have this iframe below.
例如，我在下面有这个 iframe。
<iframe id="iframe" width="1024" height="600" src="http://www.sample.com"></iframe>
I want the www.sample.compage to load inside this iframe by not simply add the URL into srcattribute, instead I'll get the current page data using ajax and to load using IFRAME tag. I'm thinking about this because I have a big problem on IFRAME cache most of the time.
我希望www.sample.com页面加载到这个 iframe 中，而不是简单地将 URL 添加到src属性中，而是使用 ajax 获取当前页面数据并使用 IFRAME 标记加载。我正在考虑这个问题，因为大多数时候我在 IFRAME 缓存上有一个大问题。
I also try this thing but, it does not work perfectly on my end.
我也尝试过这个东西，但是，它在我这边效果不佳。
<iframe id="iframe" width="1024" height="600" src="http://www.sample.com?random=1422841682605""></iframe>
randomis change everytime i load this iframe.
每次我加载这个 iframe 时随机都会改变。
I want to apply it on my responsive tool like on the image below. If you need an actual view click here.
我想将它应用到我的响应式工具上，如下图所示。如果您需要实际视图，请单击此处。
Thanks guys if have some idea out there .
谢谢你们，如果有一些想法。
回答by c-smile
You can still use src but supply data URL like this:
您仍然可以使用 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>'
);
回答by DRAB
You can change the location of an iframe with Javascript with a few different methods.
您可以通过几种不同的方法使用 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");
Of course, you must be very careful with iframes. If the iframe points to a foreign domain (ie: "Cross-Origin", ie: NOT the same domain on which the main web page is hosted) you will breach browser security policies and will throw errors if you try to manipulate / read many properties.
当然，您必须非常小心使用 iframe。如果 iframe 指向外部域（即：“Cross-Origin”，即：与托管主网页的域不同），您将违反浏览器安全策略，并且如果您尝试操作/阅读许多内容，则会引发错误特性。
Also note that by changing an iframe element's srcattribute, the iframe will automatically travel to the new location. However, if you use one of the other two methods I suggested, the srcattribute of the iframe element will not change (even though the iframe's content points to a new location).
另请注意，通过更改 iframe 元素的src属性，iframe 将自动移动到新位置。但是，如果您使用我建议的其他两种方法src之一，iframe 元素的属性将不会更改（即使 iframe 的内容指向新位置）。
If you need to get the location of an iframe, you can try:
如果需要获取 iframe 的位置，可以尝试：
iframe.contentWindow.location.href;
Again, however, if the iframe is pointing to a site that is not hosted on the same domain, this will cause an error. To be safe, use try {} catch (e) {}blocks.
但是，如果 iframe 指向不在同一域中托管的站点，则会导致错误。为了安全起见，请使用try {} catch (e) {}块。
回答by Mustafa A.
Make sure to use "http://" before the link, example:
确保在链接前使用“http://”，例如：
<iframe src="http://www.google.com"></iframe>
回答by sideroxylon
If www.sample.comis on the same domain, you can just do this:
如果www.sample.com在同一个域中，您可以这样做：
<div id = "targetDiv"></div>
<script>
$('document').ready(function() {
$('#targetDiv').load('www.sample.com');
});
</script>
Though, if it is the same domain, you'd probably use .load('/');
但是，如果它是同一个域，您可能会使用 .load('/');
