iframe与window.onload如何使用详解遮罩层 + Iframe实现界面自动显示的示例代码通过iframe监听一个DOM元素大小变化关于解决iframe标签嵌套问题的解决方法iframe跨域的几种常用方法跨域修改iframe页面内容详解iframe在移动端的缩放的示例代码web响应式布局中iframe自适应的方法div被iframe遮住的几种情况及解决方法浅谈Iframe网页内部的导航窗口举例讲解HTML中iframe和frame的区别

前言

在项目上，需要等页面加载完之后再执行一个方法用于修改页面的颜色，于是导出都是在使用onload解决，然而这并不能解决我遇到的问题，因为我发现，我项目上的页面仍然没加载，折腾了很久才知道，原来是因为项目使用了很古老的iframe来操作的，必须等iframe加载完之后才能执行方法，原因分析完了，接下来我再说说，传统的，原生JS是如何使用onload的。

网上很常见的方法

解释：window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

还有一种写法是

解释：等待body加载完成，就会执行loadBody()方法。在window和dom之后执行，总是最后执行。这里的onload函数会覆盖window.onload

上述内容并不能解决我的问题，于是我去查我不是很想用的jQuery的方法：$(document).ready，想着能不能用原生JS实现该方法

 function ready(fn){ if(document.addEventListener){ //标准浏览器 document.addEventListener('DOMContentLoaded',function(){ //注销时间，避免重复触发 document.removeEventListener('DOMContentLoaded',arguments.callee,false); fn(); //运行函数 },false); }else if(document.attachEvent){ //IE浏览器 document.attachEvent('onreadystatechange',function(){ if(document.readyState=='complete'){ document.detachEvent('onreadystatechange',arguments.callee); fn(); //函数运行 } }); } } 

但是我发现我的项目上并没有任何变化，依然不能用在项目上，这我就发愁了，我突然想到，项目上用的iframe于是就去搜了一下。

什么是iframe

HTML内联框架元素 (