iframe与load如何使⽤详解
前⾔
在项⽬上，需要等页⾯加载完之后再执⾏⼀个⽅法⽤于修改页⾯的颜⾊，于是导出都是在使⽤onload解决，然⽽这并不能解决我遇到的问题，因为我发现，我项⽬上的页⾯仍然没加载，折腾了很久才知道，原来是因为项⽬使⽤了很古⽼的iframe来操作的，必须等iframe加载完之后才能执⾏⽅法，原因分析完了，接下来我再说说，传统的，原⽣JS是如何使⽤onload的。
⽹上很常见的⽅法
<script type="text/javascript">
}
</script>
解释：load必须等到页⾯内包括图⽚的所有元素加载完毕后才能执⾏。
还有⼀种写法是
<body  οnlοad="loadBody()">
<div ></div>
<script type="text/javascript">
console.log("load ......  body  javascript  ");
window.οnlοad=function(){
console.log("load ......  body window javascript ");
}
</script>
</body>
解释：等待body加载完成，就会执⾏loadBody()⽅法。在window和dom之后执⾏，总是最后执⾏。这⾥的onload函数会覆盖load
上述内容并不能解决我的问题，于是我去查我不是很想⽤的jQuery的⽅法：$(document).ready，想着能不能⽤原⽣JS实现该⽅法
function ready(fn){
if(document.addEventListener){  //标准浏览器
document.addEventListener('DOMContentLoaded',function(){
//注销时间，避免重复触发
fn();  //运⾏函数
},false);
}else if(document.attachEvent){  //IE浏览器
document.attachEvent('onreadystatechange',function(){
adyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
fn();  //函数运⾏
}
});
}
}
但是我发现我的项⽬上并没有任何变化，依然不能⽤在项⽬上，这我就发愁了，我突然想到，项⽬上⽤的iframe于是就去搜了⼀下。
什么是iframe
HTML内联框架元素 (<iframe>) 表⽰嵌套的browsing context。它能够将另⼀个HTML页⾯嵌⼊到当前页⾯中。每个嵌⼊的浏览上下⽂（embedded browsing context）都有⾃⼰的会话历史记录(session history)和DOM树。包含嵌⼊内容的浏览上下⽂称为⽗级浏览上下⽂。顶级浏览上下⽂（没有⽗级）通常是由 Window 对象表⽰的浏览器窗⼝。
iframe 的页⾯和⽗页⾯（parent）是分开的，所以它意味着，这是⼀个独⽴的区域，不受 parent 的 CSS 或者全局的JavaScript 的影响。
主要优势：
（1）⽹页编辑器（WYSIWYG Online HTML Editor），因为它们需要 reset ⾃⼰的 CSS 到⾃⼰的标准，⽽不被 parent CSS 的 override。
（2）沙箱隔离。
（3）需要保持独⽴焦点和历史管理的⼦窗⼝，如复杂的Web应⽤。
缺点：
（1）样式/脚本需要额外链⼊，会增加请求。
（2）iframe好在能够把原先的⽹页全部原封不动显⽰下来，但是如果⽤在⾸页，是搜索引擎最讨厌的。
（3）iframe的创建⽐其它包括scripts和css的 DOM 元素的创建慢了 1-2 个数量级。
（4）iframe会阻塞主页⾯的Onload事件
好了，说了这么多利弊，还是需要看具体项⽬来解决项⽬上的问题，那么怎么解决onload呢？
// 页⾯加载时判断frameObj是否加载
var frameObj= ElementById("frameID");
// 如果已加载则执⾏⽅法
if (frameObj.attachEvent){// IE
frameObj.attachEvent("onload", function(){
yourfunction();
});
}else {
// ⾮IE
yourfunction();
};
}};
这段代码有两点⽐较重要，⾸先是需要使⽤load并且你需要知道attachEvent⽅法
iframe嵌套页面加载慢
写了这么久的代码，还是把IE放在了考虑范围内，毕竟是Windws 内核，不想删掉就隐藏吧，最近在写前端代码的时候，发现如果项⽬本来没有使⽤jQuery，就⼀直不使⽤jQuery，代码⽐较整洁，⽽且加上新出的vue、react都有⾃⼰不错的封装思路，于是我写习惯了$这个dollar符终于可以不⽤了。
总结
以前总是很懒得写前端代码，写标签呀写JS呀，都觉得⼜繁琐⼜没有意思，可能是因为学校⾥学的都是Java、C/C++这种，逻辑性很强，于是在前端的学习上，就慢了很多，慢了不知道好⼏拍。当⾃⼰想写⼀份前后端都很优雅，很华丽的代码的时候，就发现，只会后端是不够的，代码写出来要么很丑，要么前后交互很潦草，于是也就拿不出⼿了。最近呕⼼沥⾎写了⼀份代码，还在润⾊当中，⽽且申请的域名可算是通过了，这⾥有⼀个⼤坑，就是，很久之前我在国内进⾏过备案，当时因为还是学⽣，就在学校所在地申请了备案号，结果现在想换⼜觉得⿇烦，于是总是填错，今天通知我审核通过了，下⼀步就是联⽹备案，听说是⼜多了⼀步，慢慢⾛流程吧！
到此这篇关于iframe与load如何使⽤详解的⽂章就介绍到这了，更多相关iframe与load内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。