js学习笔记：操作iframe

2021-08-30 22:05:56

iframe可以说是比较老得话题了，而且网上也基本上在说少用iframe，其原因大致为：堵塞页面加载、安全问题、兼容性问题、搜索引擎抓取不到等等，不过相对于这些缺点，iframe的优点更牛，跨域请求、制作富文本编辑器、历史记录管理、长连接、无刷新文件上传等方面，可参考一下知乎的这个回答：Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？。

今天就总结一下操作iframe的方法，以及平时的一些使用。

知识点汇总

有些事情平时不用太容易忘了，所以最好在每次学其他知识的时候汇总一下其他相关的知识，把这些知识融汇一下，可能有其他收获。

document;                 // 整个页面文档

document.documentElement; // 页面的html容器

document.body;            // 页面的body

document.defaultView;     // 获取window对象，FF、chrome、ie9+

一、获取iframe的内容

如果要获取iframe中的内容，需要使用document.contentWindow属性，以及contentDocument属性

document.contentWindow 获取子窗口的window对象，ie、ff、chrome都支持，chrome需要在服务器端才能使用
document.contentDocument 获取子窗口的document对象，（ie6、7不支持）ie8+、ff、chrome支持，chrome需要在服务器端测试

如下，测试：

新建文件：index.html，iframe1.html

//index.html

<button>变色</button>

<iframe src="./iframe1.html"></iframe>

<script>

window.onload = function(){

    var btn = document.getElementsByTagName("button")[0];

    var iframe = document.getElementById("iframe1");

    btn.onclick = function(){

        iwindow = iframe.contentWindow;

        idoc = iwindow.document;

        console.log("window",iwindow);//获取iframe的window对象

        console.log("document",idoc);  //获取iframe的document

        console.log("html",idoc.documentElement);//获取iframe的html

        console.log("head",idoc.head);  //获取head

        console.log("body",idoc.body);  //获取body

        idoc.body.style.color = "red";  //设置字体颜色

    }

}

</script>

//iframe1.html

<p>test test</p>

Demo测试地址：点击这里

这样我们就获取到了iframe中的一些对象：

二、通过iframe设置本页面内容

通过iframe获取其父容器的window属性，通过window.parent，window.top。

window.parent 直接获取父元素的window，如果父元素还是iframe，那就是该iframe的window对象
window.top 获取最顶层的容器的window对象

此外，还有一个window.self属性

window.self 对对象自身的引用，如下测试：

在index.html以及iframe.html中增加代码

//index.html

//iframe window

var iwindow = iframe.contentWindow;

var idoc = iwindow.document;

var ibtn = idoc.getElementsByTagName("button")[0];

ibtn.onclick = function(){

    console.log("self--", iwindow.self);

    console.log("parent--", iwindow.parent);

    console.log("top--", iwindow.top);

    console.log(iwindow.top === iwindow.parent);

    console.log(iwindow.self === iwindow.top);

    window.parent.document.body.style.color = "red";

}

//iframe1.html

<button>改变</button>

Demo测试地址，点击这里

三、多个iframe

如果页面中嵌套的iframe很少甚至说没有iframe，此时，window.top、window.self、window.parent都是指向一个window。

如果页面中有多层次的iframe潜逃，那么window.parent、window.top的作用就比较突出了。

四、iframe的onload事件

iframe也有onload事件，即加载完触发的事件，不过，IE浏览器不止onload直接触发，需要使用ie事件操作处理程序。

window.onload = function(){

    var iframe = document.createElement("iframe");

    iframe.src = "./iframe1.html";

    document.body.appendChild(iframe);

    iframe.onload = function(){

        alert("iframe loaded");

    }

    //对于ie浏览器，需要使用attachEvent()

    iframe.attachEvent('onload', function(){

        alert("iframe loaded");

    })

}

五、网站防钓鱼处理方法(防被嵌套)

有些不法人们利用iframe制作出一些类似官网的网站，当用户输入信息的时候，信息被不法分子获取到，这个网站就叫做钓鱼网站，当然，用户就是那条鱼。这种制作方式简单，快速，直接通过iframe引入一个网站即可，然后修饰一下边框之类，这样用户输入之后，通过js就能获取到用户的信息了。

那么，如何防止网站被钓鱼呢？方法也很简单，判断引入该框架的网站是不是我们自己的网站：

新建文件：iframe2.html

//iframe2.html

if(window != window.top){

    window.top.location.href = "http://baidu.com";

}

Demo地址：点击这里

这样通过判断iframe是不是被嵌套即可，如果被嵌套，则iframe的window和window.top不相同，此时让window.top进行跳转到真正的页面，就达到了防被嵌套的效果。

六、动态设置iframe的高度

默认情况下，嵌套iframe之后，iframe不会自动撑开，而是出现滚动条，就像这样，我创建的是一个200*200的盒子：

那么，该如何让ifram的高度自适应呢，下面是一些实践：

第一步：去掉滚动条

<iframe src="./iframe1.html" id="iframe1" scrolling="no"></iframe>

第二步：通过contentWindow获取iframe的offsetwidth，设置给height：

var iframe = document.getElementById("iframe");

var idoc = iframe.documentWindow.document;

iframe.height = idoc.body.offsetHeight;

Demo测试地址：点击这里

参考链接

妙味课堂-视频问题解答-操作iframe

Iframe 有什么好处，有什么坏处？国内还有哪些知名网站仍用Iframe，为什么？有哪些原来用的现在抛弃了？又是为什么？

文章转自：绿岛之北

绿岛之北：http://wp.me/p6x6a2-tP

码农公寓