BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

iframeとwindow.onloadの詳しい使い方

2022-01-13 16:54:33

プリアンブル

プロジェクトでは、ページの色を変更するメソッドを実行する前に、ページの読み込みが完了するのを待つ必要があるので、輸出は問題を解決するためにonloadを使用している、しかし、これは私が遭遇した問題を解決していない、私は私のプロジェクトのページがまだロードされていないことがわかったので、知って長い時間を投げた、それは、プロジェクトが操作する非常に古いiframeを使っているので、あなたはメソッドを実行する前にロードが終了するまで待機する必要があります。理由を分析した後、私は伝統的な、ネイティブのJSは、オンロードを使用する方法について説明します。

Web上ではごく一般的な方法 

<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>

説明 ボディの読み込みが終了するのを待って、loadBody()メソッドが実行されます。これはwindowとdomの後に実行され、常に最後に実行されます。ここでのonload関数は、window.onloadをオーバーライドします。

上記で解決しなかったので、本当は使いたくなかったjQueryのメソッド、$(document).readyをネイティブJSで実装できないかと思い調べてみたところ 

function ready(fn){
 if(document.addEventListener){ //standard browser
  document.addEventListener('DOMContentLoaded',function(){
   //logout time to avoid repeated triggering
   document.removeEventListener('DOMContentLoaded',arguments.callee,false);
   fn(); //run the function
  },false);
 }else if(document.attachEvent){ //IE browser
  document.attachEvent('onreadystatechange',function(){
   if(document.readyState=='complete'){
    document.detachEvent('onreadystatechange',arguments.callee);
    fn(); // function runs
   }
  });
 }
}

しかし、私のプロジェクトでは何も変わっていないことがわかり、やはりプロジェクトではうまくいかず、あせりました。ふと、プロジェクトで使用しているiframeが思い浮かんだので、検索してみました。

iframeとは何ですか？

HTMLのインラインフレーム要素(

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します