標籤:blog http io os java ar 資料 div sp
H5 跨域通訊:
在首頁面中通過iframe嵌入外部頁面,通過iframe的window對象postMessage方法向iframe頁面傳遞訊息。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>跨域通訊樣本</title> 6 <script type="text/javascript"> 7 function hello(){ 8 var iframe = document.getElementById("iframe").contentWindow; 9 iframe.postMessage("hello, 這是首頁面傳過來的資料", "http://localhost/html5/b.html");10 }11 </script>12 </head>13 <body>14 <h1>跨域通訊樣本</h1>15 <iframe width="400" src="http://localhost/html5/b.html" onload="hello()" id="iframe">16 </iframe>17 </body>18 </html>
iframe頁面中通過對視窗對象的message事件進行監聽,以擷取訊息。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <script type="text/javascript"> 6 window.addEventListener("message", getEvent, false); 7 function getEvent(event){ 8 alert("從" + event.origin + "那裡傳遞過來的資訊是:\n" + event.data); 9 }10 </script>11 </head>12 <body>13 iframe 頁面14 </body>15 </html>
Html5 跨域通訊