基础信息
简介：
????????iframe作为一个html标签，可以让嵌入任何的html网页
属性：
????????1.frameborder:是否显示边框，1(yes),0(no)
????????2.height:height属性指定了iframe的像素高度，建议使用css設置。
????????3.width:width属性指定了iframe的像素宽度，建议使用css設置。
????????4.name:iframe的名称，window.frames[name]时专用的属性。
????????5.scrolling:iframe是否滚动。yes,no,auto。
????????6.src：iframe的网址。
????????7.sandbox:控制iframe內的权限(html5新功能)，相关资料：Play safely in sandboxed IFrames - HTML5 RocksHow to Safeguard your Site with HTML5 Sandbox | Microsoft Docs
缺点：
????????1、iframe会阻塞主页面的Onload事件；
????????2、搜索引擎的检索程序无法解读这种页面，不利于SEO；
????????3、iframe和主页面共享连接池，而浏览器对同域的连接有限制，所以会影响页面的并行加载；
????????4.因为iframe等于打开一个新的网页，所有的JS/CSS全部加载一遍，内存会增加；
iframe非跨域通信
有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;
父调子
// 父页面
<button id="button">给子页面发消息</button>
<iframe src="http://127.0.0.1:5500/iframe/children.html" name="childrenName"></iframe>
<script>
var button = document.getElementById('button');
button.onclick=function(){
if(childrenName.document.readyState=="complete"){
childrenName.window.fnChild('hello啊，在吗'); // 向子页面问好
}
}
</script>
// 子页面
<div id="hhhh">我是子页面</div>
<script>
function fnChild (arg) {
console.log(arg); // 成功打印出‘hello啊，在吗’
}
</script>
当然以上的前提的话是iframe中的内容已经加载完毕，否则是会报错的;
判断iframe 加载是否完成有2种方法
1,childrenName.document.readyState == 'complete'来判断；
2,childrenName.onload = function() {}??使用onload 回调函数,把调用的方法都写在这个回调函数里面
子调父
// 父页面
function receive(arg) {
console.log(arg)
}
// 子页面
parent.window.receive('不在');
当然我们也会牵扯到父子元素的引用：
父页面获取子页面元素操作
我们还是使用上面的html
//原生js 获取子页面window对象
1、var childWindow = document.getElementById("hhhh").contentWindow;
2、var childWindow = document.getElementsByTagName('div')[0].contentWindow;
// 其实就是普通的获取方法,只是后面多了一个contentWindow;
// jquery
var childWindow = $('#hhhh').contentWindow;
// 获取子页面的document对象 (假设已经通过上面的方法得到了window对象)
var frameDoc = childWindow.document;
var frameBody = frameDoc.body;
// jquery 也是跟上面的一样
var frameDoc = $(childWindow.document);
// 原生获取元素
childWindow.document.getElementById('a') // 上面都已经拿到了子页面的window对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById('a').style.color='red' // 改个颜色
// jq拿子页面元素
$('#f').contents().find('#a'); // $('#f').contents 这相当于拿到了iframe 里面所有的dom;
子页面访问父页面元素
// 原生js
window.parent.document.getElementById('a'); // window.parent获取到父页面的window对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById('a').style.color="red";// dom操作
// jquery
$("#a",parent.document); // $(父页面元素选择器, parent.document);
$("#a",parent.document).css('border','1px solid red');
iframe跨域通信
父传子
// 父页面
<iframe id="iframe" src="http://test.com/childrenCrossDomain.html" name="childrenName"></iframe>
<script>
let iframe = document.getElementById('iframe');
function sendToChildren(){
iframe.contentWindow.postMessage('hello啊，在吗', 'http://test.com')
}
</script>
// 子页面
<script>
window.addEventListener("message", function(e){
console.log(e.data)
});
</script>
子传父
// 父页面
window.addEventListener('message',function(e){
console.log(e.data)
})
// 子页面
window.parent.postMessage('不在', 'http://父域名');
父子页面元素操作
跨域情况下是不能直接获取子页面元素的，但如果是同一主域的跨域，如：aaa.test.com和bbb.test.com，可以采用如下方法：
实现的关键点，是在父、子页面都加入一条js语句：
<script language="javascript">
document.domain = "test.com";
</script>
父页面代码：
<body>
<div id="parentPage">aaa</div>
</body>
<script type="text/javascript">
document.domain = "test.com";
setTimeout(function(){
//父页面获得子页面某元素的html内容
console.log(document.getElementById("iframe1").contentWindow.document.getElementById("sonPage").innerHTML);
},3000);
</script>
<iframe id="iframe1" name="iframe1" style="width:0px;height:0px" src="http://bbb.test.com/test.html">
子页面代码：
<body>
<div id="sonPage">bbb</div>
</body>
<script type="text/javascript" >
document.domain = "test.com";
//子页面赋html内容给父页面某元素
window.parent.document.getElementById("parentPage").innerHTML = "123";
</script>
|