<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • 修改iframe頁面中的css

    在一個html頁面中(a.html)使用iframe引入另外一個頁面(b.html),有時候我們需要修改ifram頁面的樣式,該如何操作呢?假設我們沒有修改b.html頁面的權限(否則直接修改b.html的代碼不就簡單了么)。
    
    分為兩種情況。
    
    1、a.html和b.html屬于同一個域下:
    
    思路:在b.html頁面加載完畢后,在a.html中通過js獲取到b.html頁面中的元素,然后進行樣式處理。看個例子:
    
    1)a.html:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
      </head>
      <body>
        <div>這是 第一個 網頁</div>
        <iframe src="b.html" frameborder="0" id="frame" onload="ifram_onlaod();"></iframe>
      </body>
     
      <script>
      function ifram_onlaod(){
       var test =
              document.getElementById('frame').contentWindow.document.getElementById('cc');
            test.style.background = "red";
      }
      </script>
    </html>
    2)b.html
    <html>
      <body style="background-color:#8F8FBD">
        <div id="cc">Frame A</div>
      </body>
    </html>

     

    如果是在本地雙擊用瀏覽器訪問上面代碼,會遇到如下錯誤:

    這個問題就是跨域訪問ifram元素造成的。也就是要說的第二種情況。


    2、a.html和b.html屬于不同域下: 可以使用HTML5中新定義的window.postMessage 來實現跨域通信。 1)a.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div> 這是 第一個 網頁</div> <iframe src="b.html" frameborder="0" id="frame" onload="ifram_onlaod();"></iframe> </body> <script> function ifram_onlaod(){ var iframe = document.getElementById('frame'); if (iframe && iframe.contentWindow) { iframe.contentWindow.postMessage("red", '*'); } } </script> </html> 2)b.html <html> <body style="background-color:#8F8FBD"> <div id="cc">Frame A</div> </body> <script> window.addEventListener('message', function(event) { document.getElementById("cc").style.background = event.data; }, false); </script> </html> 注意:需要有b.html的修改權限。

      

    posted on 2022-06-28 16:23  zhanglanzuopin  閱讀(1)  評論(0編輯  收藏  舉報

    導航

    国产美女a做受大片观看