定义:iframe会创建包含另一个文档的内联框架;提示:<iframe>您的浏览器不支持iframe</iframe>这样可以应对无法理解
iframe的浏览器。
iframe用处:1>.一个网页中嵌入了另一个网页:<iframe src="xxx.html"></iframe>直接给iframe的src指定要嵌入的网页
即可;
2>.局部刷新: ①通过和替换iframe的src实现局部刷新;
eg.js:function refresh(url){
document.getElementById("iId").src=url;
}
<button οnclick="refresh(xxx.html)">刷新</button>
②使用iframe.location.reload();
eg.<iframe src="1.html" name="iName" id="iId"></iframe>
通过id定位:
<button οnclick="iId.window.location.reload()">刷新</button>
通过name定位:
<button οnclick="document.frames["iName"].location.reload()">刷新</button>
3>.js跨域: ①document.domain+iframe【这两个域名必须属于同一个基础域名 】
eg.a.xxx.com和b.xxx.com两个页面实现跨越,设置两者document.domain="xxx.com" ;
②location.hash+iframe(window.name类似):
eg.www.a.com/#page1中“page1”就是location.hash,假设a.com下的a.html要和b.com下的b.html进行通信,
在a.html中创建一个隐藏的iframe,iframe的src指向b.html,这时hash值可以用作参数传递附在src中地址后边,
在b.html响应后再通过修改hash值来传递数据。
虽然iframe可以实现很多功能,但是iframe也存在一些缺陷:
iframe会阻塞主页面的onload事件;
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响主页面的并行加载;
使用iframe时,建议使用js动态添加iframe的src属性值,可以避免上边的问题。