iframe父頁面傳遞引數給子頁面
阿新 • • 發佈：2022-03-07
父頁面通過ifarame傳遞引數
有些時候，我們需要在巢狀頁面。 我們就需要使用iframe了。 通過iframe傳遞引數給子頁面。 需求描述，當我們點選按鈕的時候。 傳遞引數給子頁面。子頁面接受後展示出來。 我們使用postMessage() 方法用於安全地實現跨源通訊。 otherWindow.postMessage(message, targetOrigin, [transfer]); 第一個引數你傳遞的訊息 第二個引數你傳遞的地址。(其值可以是 *（表示無限制）或者一個 URI) 第三個引數transfer可選，是一串和 message 同時傳遞的 Transferable 物件。 這些物件的所有權將被轉移給訊息的接收方，而傳送一方將不再保有所有權。
父頁面傳遞引數
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>父頁面給子頁面傳遞引數</title> <style> html, body { height: 100%; } </style> </head> <body> <div> <input id="text" type="text" value="Runoob" /> <button id="sendMessage">傳送訊息</button> </div> <iframe id="receiver" src="http://127.0.0.1:8848/%E7%A5%9E%E5%A5%87%E7%9A%84display/index.html" width="100%" height="100%"> <p>我是標題</p> </iframe> <script> window.onload = function() { //獲取iframe視窗的 contentWindow 屬性 var receiver = document.getElementById('receiver').contentWindow; console.log('receiver', receiver) // 給按鈕繫結點選事件 var btn = document.getElementById('sendMessage'); btn.addEventListener('click', function(e) { // 阻止事件的預設行為 e.preventDefault(); var val = document.getElementById('text').value; // 傳遞資料給子頁面.是我另外一個伺服器的地址[http://127.0.0.1:8848] receiver.postMessage("Hello " + val + "！", "http://127.0.0.1:8848"); }); } </script> </body> </html>
子頁面接受引數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #divdemo{ background:pink; } </style> </head> <div id="recMessage"> 我是子頁面 </div> </body> <script> window.onload = function() { var messageEle = document.getElementById('recMessage'); window.addEventListener('message', function (e) { // 監聽 message 事件 console.log("e",e) alert('訊息來自的地址',e.origin); if (e.origin !== "http://127.0.0.1:5500") { // 驗證訊息來源地址。這個地址是父頁面的地址 return; } messageEle.innerHTML = "從"+ e.origin +"收到訊息： " + e.data; }); } </script> </html>
遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。
作者：明月人倚樓出處：https://www.cnblogs.com/IwishIcould/
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！
如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關注博主，在此感謝！
萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！
想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯絡你；(っ•̀ω•́)っ✎⁾⁾！
支付寶 微信 本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段宣告，在文章頁面明顯位置給出原文連線如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。