亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何使用iframe與window.onload

發布時間:2022-02-25 16:21:02 來源:億速云 閱讀:206 作者:iii 欄目:開發技術

這篇文章主要講解了“如何使用iframe與window.onload”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“如何使用iframe與window.onload”吧!

前言

在項目上,需要等頁面加載完之后再執行一個方法用于修改頁面的顏色,于是導出都是在使用onload解決,然而這并不能解決我遇到的問題,因為我發現,我項目上的頁面仍然沒加載,折騰了很久才知道,原來是因為項目使用了很古老的iframe來操作的,必須等iframe加載完之后才能執行方法,原因分析完了,接下來我再說說,傳統的,原生JS是如何使用onload的。

網上很常見的方法:

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

解釋:window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。

還有一種寫法是:

<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于是就去搜了一下。

什么是iframe

HTML內聯框架元素 (<iframe>) 表示嵌套的browsing context。它能夠將另一個HTML頁面嵌入到當前頁面中。每個嵌入的瀏覽上下文(embedded browsing context)都有自己的會話歷史記錄(session history)和DOM樹。包含嵌入內容的瀏覽上下文稱為父級瀏覽上下文。頂級瀏覽上下文(沒有父級)通常是由 Window 對象表示的瀏覽器窗口。

如何使用iframe與window.onload

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是否加載
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,就一直不使用jQuery,代碼比較整潔,而且加上新出的vue、react都有自己不錯的封裝思路,于是我寫習慣了$這個dollar符終于可以不用了。

感謝各位的閱讀,以上就是“如何使用iframe與window.onload”的內容了,經過本文的學習后,相信大家對如何使用iframe與window.onload這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

罗江县| 关岭| 萨迦县| 永德县| 阿图什市| 易门县| 台中县| 五家渠市| 喀喇| 蕲春县| 灵台县| 安阳县| 长宁区| 德阳市| 鸡泽县| 固镇县| 柳州市| 县级市| 黎城县| 五寨县| 正镶白旗| 上蔡县| 鄄城县| 罗田县| 安福县| 龙游县| 遂昌县| 威宁| 禄劝| 鹤峰县| 鄂托克旗| 鄂伦春自治旗| 扎赉特旗| 临漳县| 龙山县| 婺源县| 华阴市| 黄石市| 洛扎县| 徐汇区| 郑州市|