iframe通信怎么實現

本文小編為大家詳細介紹“iframe通信怎么實現”，內容詳細，步驟清晰，細節處理妥當，希望這篇“iframe通信怎么實現”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

一 iframe簡介

iframe是一個行內標簽，在一個頁面中使用iframe標簽，通過src可以鏈接到其他頁面。當前頁面也可通過設置 X-Frame-Options：'sameorigin'，只允許同源訪問。

二 iframe通信

1.同源通信

通過在父頁面中中獲取iframe頁面的window，通過window去調用子頁面的全局函數實現 父向子傳值；

/*父頁面*/
  <iframe id='child' scr='*'></iframe>
  <script>
    const child = document.querySelector('#child');
    child.contentWindow.on(x);
  </script>

/*子頁面*/
  <script>
    function on(message){
      console.log(message);
    };
  </script>

2.非同源通信

父頁面通過iframeDom.postMessage 來發送數據， 子頁面通過window.onmessage 來監聽發送過來的數據

/*父頁面*/
  <iframe id='child' scr='*'></iframe>
  <script>
    const child = document.querySelector('#child');
    child.postMessage(x,y); // x 表示傳遞數據，y表示url，可以設置為'*'
  </script>

/*子頁面*/
  <script>
    const fn = (e)=>{
      console.log(e.data);
    };
    window.addEventLisener= ('message',fn)
  </script>

關于頁面的跳轉

a標簽的target屬性

_self： 在當前tab中進行跳轉；// 如果iframe子頁面中使用這個屬性，會在iframe中進行跳轉；
_blank: 新開一個tab進行跳轉 // iframe子頁面中，和父頁面表現一致
_parent: 在iframe中生效，表示在當前iframe頁面外一層的父頁面中進行跳轉,可以外層的一個iframe，也可以是最外層主頁面
_top: 在iframe中生效，表示當前iframe最外層的主頁面中進行跳轉

location.href 進行跳轉

location.href: 在當前頁面進行跳轉；// 如果在iframe的子頁面中進行使用，會在當前iframe內部進行跳轉頁面；
window.parent.location.herf: 在iframe子頁面中使用，表示在父頁面中跳轉
window.top.location.href: 在iframe子頁面中使用，表示在頂層頁面中跳轉
window.open('*'); // 新開一個tab頁跳轉

讀到這里，這篇“iframe通信怎么實現”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。