iframe与window.onload怎样应用详解

日期:2021-02-22 类型:科技新闻 

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

序言

在新项目上,必须等网页页面载入完以后再实行1个方式用于改动网页页面的色调,因而导出来全是在应用onload处理,但是这其实不能处理我遇到的难题,由于我发现,我新项目上的网页页面依然没载入,折腾了很久才了解,原先是由于新项目应用了很古老的iframe来实际操作的,务必等iframe载入完以后才可以实行方式,缘故剖析完了,接下来我再说说,传统式的,原生态JS是怎样应用onload的。

在网上很普遍的方式

<script type="text/javascript">
window.onload=function(){
    document.getElementById("bg").style.backgroundColor="#F00";
}
</script>

解释:window.onload务必直到网页页面内包含照片的全部元素载入结束后才可以实行。

也有1种写法是

<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涵数会遮盖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因而就去搜了1下。

甚么是iframe

HTML内联架构元素 (<iframe>) 表明嵌套循环的browsing context。它可以将另外一个HTML网页页面嵌入到当今网页页面中。每一个嵌入的访问左右文(embedded browsing context)都有自身的对话历史时间纪录(session history)和DOM树。包括嵌入內容的访问左右文称为父级访问左右文。顶级访问左右文(沒有父级)一般是由 Window 目标表明的访问器对话框。

iframe 的网页页面和父网页页面(parent)是分开的,因此它代表着,这是1个单独的地区,不会受到 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⑵ 个数量级。
(4)iframe会堵塞首页面的Onload恶性事件

好了,说了这么多利与弊,還是必须看实际新项目来处理新项目上的难题,那末如何处理onload呢?

// 网页页面载入时分辨frameObj是不是载入
window.onload = function(){  
 var frameObj= document.getElementById("frameID");
 // 假如已载入则实行方式
 if (frameObj.attachEvent){// IE
        frameObj.attachEvent("onload", function(){
            yourfunction();
        });
    }else {
        // 非IE
        frameObj.onload = function(){
            yourfunction();
        };
}};

这段编码有两点较为关键,最先是必须应用window.onload而且你必须了解attachEvent方式

写了这么久的编码,還是把IE放在了考虑到范畴内,终究是Windws 核心,不想删除就掩藏吧,近期在写前端开发编码的情况下,发现假如新项目原本沒有应用jQuery,就1直不应用jQuery,编码较为干净整洁,并且再加新出的vue、react都有自身非常好的封裝思路,因而我写习惯性了$这个dollar符终究能够无需了。

总结

之前一直很懒得写前端开发编码,写标识呀写JS呀,都感觉又繁琐又沒有意思,将会是由于院校里学的全是Java、C/C++这类,逻辑性性很强,因而在前端开发的学习培训上,就慢了许多,慢了不知道道好几拍。当自身想写1份前后左右端都很雅致,很绮丽的编码的情况下,就发现,只会后端开发是不足的,编码写出来要末很丑,要末前后左右互动很潦草,因而也就拿不出手了。近期尽心竭力写了1份编码,还在润饰之中,并且申请办理的网站域名可算是根据了,这里有1个大坑,便是,很久以前我在中国开展过办理备案,那时候由于還是学员,就在院校所属地申请办理了办理备案号,結果如今想换又感觉不便,因而一直填错,今日通告我审批根据了,下1步便是连接网络办理备案,听闻是又多了1步,渐渐地走步骤吧!

到此这篇有关iframe与window.onload怎样应用详解的文章内容就详细介绍到这了,更多有关iframe与window.onload內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!