关于iframe

Posted 2020-08-17

iframe一般用来嵌套其他页面来使用

1、如何使用？

<iframe id="iframe1" src="2.html" frameborder="0" width="1000" height="300"></iframe>

src－定义引入的页面地址；width，height－定义iframe宽高；

2、父页面如何跟iframe的子页面通讯？

// 找到iframe元素
var oIframe1 = document.getElementById(‘iframe1‘);
// 获取iframe页面的window对象
var iframe1_window = oIframe1.contentWindow || oIframe1.contentDocument;
document.getElementById(‘btn_html2‘).onclick = function(){
　　// 操作iframe上的文档元素
　　iframe1_window.document.getElementById(‘div‘).style.backgroundColor = "red";
}

3、被iframe嵌套的字页面如何跟父页面通讯？

被iframe的子页面，可以通过window.parent获取上一级的父页面window对象，如果有多级嵌套，要找最外层的父极时，可以使用window.top找到最外层父极元素。例如：父极元素有对象  var obj = { arr: [] };  然后，子页面想操作修改arr值：

// 给top最外层父页面赋值
document.getElementById(‘btn3_html3‘).onclick = function(){
    window.top.obj.arr = [1,2,3];
}

4、上面赋值没问题，但是如果你在父页面用 instanceof 对arr做数组检测，会出问题

当3中赋值完后，在父页面对arr做检测：

console.log(obj.arr instanceof Array);

结果会返回 false，问题来了，明明是一个数组为什么给到父页面却不认识是一个数组了？

原因是：instanceof 操作符，它假定单一的全局执行环境，如果网页中包含多个框架，那实际上就存在多个不同全局执行环境，从而存在多个不同版本的Array构造函数，如果从一个框架向另一个框架传入数组，那传入的数组与第一个框架原生创建的数组分别具有各自不同的构造函数。

在ES5中，为了解决这个问题，实现了 Array.isArray(值) 的方法，确定某个值是否是数组，而不管他是哪个全局执行环境中实现的。但IE8及以下不支持该方法。终极解决办法：

Object.prototype.toString.call([]);    // 返回"[object Array]"

5、有时候，山寨、钓鱼网站会用iframe的这种形式欺骗用户，如何禁止被其他网站使用嵌套自己网站？

if(window.top != window){
    window.top.location.href = "xxx.html";
}

如果 window.top != window 就跳回到自己的页面。