使用ajax在IFRAME中加载页面
[英]Load the page inside of IFRAME using ajax
问题描述
how about loading your page using IFRAME ? 
如何使用IFRAME加载页面？ I was thinking if this is possible .. 我在想这是否可能..
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.com page to load inside this iframe by not simply add the URL into src attribute, instead I'll get the current page data using ajax and to load using IFRAME tag. 我希望www.sample.com页面加载到这个iframe中，而不是简单地将URL添加到src属性中，而是使用ajax获取当前页面数据并使用IFRAME标记加载。 I'm thinking about this because I have a big problem on IFRAME cache most of the time. 我正在考虑这个问题，因为我在大多数时候都在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>
random is 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 . 谢谢你们，如果有一些想法那里。
4 个解决方案
解决方案1
5 2015-02-02 02:40:17
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>'
);
解决方案2
2 2015-02-02 02:26:11
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. 当然，你必须非常小心iframe。 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指向外部域（即：“Cross-Origin”，即：不是托管主网页的同一域），则会违反浏览器安全策略，如果您尝试操作/读取许多内容，则会抛出错误属性。
Also note that by changing an iframe element's src attribute, the iframe will automatically travel to the new location. 另请注意，通过更改iframe元素的src属性，iframe将自动转到新位置。 However, if you use one of the other two methods I suggested, the src attribute of the iframe element will not change (even though the iframe's content points to a new location). 但是，如果您使用我建议的其他两种方法之一，iframe元素的src属性将不会更改（即使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. 但是，如果iframe指向不在同一域上托管的站点，则会再次导致错误。 To be safe, use try {} catch (e) {} blocks. 为安全起见，请使用try {} catch (e) {}块。
解决方案3
1 2015-02-02 02:28:38
确保在链接前使用“http：//”，例如：
<iframe src="http://www.google.com"></iframe>
解决方案4
1 2015-02-02 02:37:00
If www.sample.com is 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('/');
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.