從多個方面理解iframe傳值

一、vue中的iframe傳值

在vue的框架中，如果需要把一個頁面嵌套到另一個頁面中，可以使用iframe標籤。一般情況下，如果需要把一些數據從子頁面傳到父頁面，可以使用iframe的contentWindow屬性，然後在子頁面中通過postMessage函數向父頁面發送消息，從而實現數據傳遞。

// 父頁面

<iframe src="child.html" id="frame" width="100%" height="600" frameborder="0"></iframe>

    window.addEventListener('message', function (event) {
      console.log(event.data)
    }, false);

   var iframe = document.getElementById("frame");
   iframe.contentWindow.postMessage("hello world", "*");


// 子頁面


    window.addEventListener('message', function (event) {
      console.log(event.data)
    }, false);

    window.parent.postMessage("hello world", "*");

在父頁面中，可以通過添加監聽函數，監聽子頁面發來的消息，然後進行相應的處理。同樣，在子頁面中也可以添加監聽函數，監聽父頁面發來的消息。

二、iframe傳值的依賴

在使用iframe傳值的過程中，可能會涉及到一些依賴。常用的依賴包括postMessage、easyXDM、window.name、hashchange等。

其中，postMessage是比較常用的一種依賴方式，在上述vue中已經有所涉及。而easyXDM則是一個更為高級的跨域解決方案，它支持所有現代瀏覽器，並且支持IE6+。

而window.name則是一種比較特殊的方式，它可以通過在父頁面中設置window.name的值，然後在子頁面中獲取這個值，來實現數據傳遞。而hashchange則是通過監聽URL的hash部分的變化來實現數據傳遞。

三、iframe傳值到父頁面

當需要在iframe中傳值到父頁面中時，可以使用postMessage函數。具體實現可以參照上方vue中的例子。在父頁面中，可以監聽子頁面發來的消息，並進行相應的處理。

在一些特殊情況下，可能需要在iframe中傳遞一個對象，這時可以採用JSON.stringify函數和JSON.parse函數來完成數據的序列化和反序列化。

// 父頁面

  window.addEventListener('message', function (event) {
    console.log(event.data)
  }, false);

// 子頁面

  window.parent.postMessage(JSON.stringify({name: '小明', age: 18}), '*');

四、iframe傳值給父頁面

當需要在父頁面中獲取iframe中的值時，可以使用contentWindow屬性來獲取iframe的window對象，從而訪問iframe中的數據。

<iframe src="child.html" id="frame" width="100%" height="600" frameborder="0"></iframe>

    var iframe = document.getElementById('frame');
    console.log(iframe.contentWindow.document.body.innerHTML);

以上代碼中，通過獲取iframe的window對象，進而獲取子頁面中的body內的HTML文本。同樣，也可以獲取其他頁面元素的值，並進行相應的處理。需要注意的是，由於跨域的限制，有些情況下獲取iframe中的值可能會受到限制。

五、layui中的iframe傳值

在layui的框架中，可以使用iframe標籤將一個頁面嵌入到主頁面中。在iframe頁面中，可以通過父頁面中的layui.admin.popup.qxuiframe函數向父頁面發送消息。

// 父頁面

layui.use(['admin'], function(){
    var admin = layui.admin;
    admin.popup.qxuiframe({
      id: 'iframe',
      area: ['800px', '550px'],
      url: 'child.html'
    });
});

// 子頁面

parent.layui.admin.events.iframe('hello', 'world');

在父頁面中，通過引入layui庫之後，可以獲取到admin對象，並使用它裏面的popup.qxuiframe函數來打開一個iframe彈窗。

而在子頁面中，則需要先獲取到父頁面的window對象，再通過它裏面的layui.admin.events.iframe函數來向父頁面發送消息。消息中可以包括任何需要傳遞的數據。

六、iframe怎麼相互傳遞參數

在嵌套的iframe頁面中，如果需要相互傳遞參數，可以使用postMessage函數。具體實現方式與vue中類似，不再贅述。

如果iframe頁面之間需要建立鏈接，可以通過設置URL參數來完成。例如，在鏈接中添加「#」後，可以在URL中添加一些參數來完成數據傳遞。

<iframe src="child.html#name=小明&age=18" id="frame" width="100%" height="600" frameborder="0"></iframe>

在子頁面中，可以通過訪問location.hash來獲取父頁面傳遞的數據。

console.log(location.hash.substring(1)); // 輸出 "name=小明&age=18"

七、iframe之間的相互傳值

在兩個iframe頁面之間實現數據傳遞時，一般需要在父頁面中進行協調。父頁面可以在監聽到一個iframe發送消息之後，再轉發這個消息給另一個iframe。實現的具體實現方式與vue中大致相同，不再贅述。

需要注意的是，在實現跨域的iframe傳值時，需要考慮到安全性問題。因此，應該採用安全性較高的postMessage函數作為主要的傳值方式，避免出現安全漏洞。