iframe:
iframe是一个标签dom元素(<iframe src="" frameborder="0"></iframe>),内联框架
作用:可以一个网页里嵌入另一个网页(具有父子关系)
用法:导航栏tab切换页(古老的做法)、在线编辑器、广告植入,历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,跨域通信等
iframe的利弊:
iframe会阻塞页面加载,
触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 “忙” 指示器停止,告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后,它给用户的感觉就是这个网页非常慢。
window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。通过 JavaScript 动态设置 iframe 的 src 可以避免这种阻塞情况
解决跨域问题 这个很牵强... 其实他已经不怎么用了(ajax的出现)
如何获取iframe内的window(然后在获取window下的数据):
获取子窗口
1.document.getElementsByTagName('iframe')[0].contentWindow
2.document.getElementsById('id').contentWindow
简易写法
window.frames['iframe的name'] ==> 给iframe添加name属性(属性值为要获取的数据)
搞事的IE专用:
3.document.iframes[name].contentWindow
4.document.iframes[i].contentWindow
父子页面窗口的关系:
window.self
就是自己--->神经病的属性
window.parent
父级窗口对象
window.top
顶级窗口对象
window.name :
window.name 特点 页面重载刷新 name值不变 即使换了一个页面依旧能访问到。
跨域都要受到同源策略的限制。但是通过windows.name 可以巧妙的实现跨域
在不同源的网址上设置window.name 然后在当前网页窗口加载到和目标同源的url,这样就能实现获取不同源的数据。
改变不同源网站的iframe的url,把url改成与想要访问数据网址同源的iframe的url,就能间接实现跨域吗。
下面代码实现要安装本地服务器。
<iframe src="../two/index.html" frameborder="1" width=500 height=500></iframe>
<script>
var oIframe = document.getElementsByTagName('iframe')[0];
//获取子窗口的window
var iframe = oIframe.contentWindow;
var flag = false;
//之所以判断if是为了iframe的url改变时会刷新页面(一直刷新,我们只需要一次,锁住就行)
oIframe.onload = function () {
if (!flag) {
flag = true;
oIframe.src = './three.html';
} else {
console.log(iframe.name);
}
}
</script>