JavaScript Code復(fù)制內(nèi)容到剪貼板
- test.html<section id="wrapper">
- <header>
- <h1>postMessage (跨域)</h1>
- </header>
- <article>
- <form>
- <p>
- <label for="message">給iframe發(fā)一個(gè)信息：
- </label>
- <input type="text" name="message" value="son" id="message"/>
- <input type="submit"/>
- </p>
- </form>
- <h4>目標(biāo)iframe傳來(lái)的信息：</h4>
- <p id="test">暫無(wú)信息</p>
- <iframe id="iframe"
- src="http://xiebiji.com/works/postmessage/iframe.html">
- </iframe>
- </article>
- </section>
iframe.html
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <strong>iframe指向xiebiji.com</strong><form> <p>
- <label for="message">給父窗口發(fā)個(gè)信息：</label>
- <input type="text" name="message" value="dad" id="message"/>
- <input type="submit"/> </p></form>
- <p id="test">暫無(wú)信息。</p>下面是test.html里的Javascript代碼（發(fā)送數(shù)據(jù)）：var win = document.getElementById("iframe").contentWindow;document.querySelector('form').onsubmit=function(e){
- win.postMessage(document.getElementById("message").value,"*");
- if (e.preventDefault)
- e.preventDefault();
- e.returnValue = false;
- }
JavaScript Code復(fù)制內(nèi)容到剪貼板
- win.postMessage(document.getElementById("message").value,"*");
postMessage是通信對(duì)象的一個(gè)方法，所以向iframe通信，就是iframe對(duì)象調(diào)用postMessage方法。postMessage有兩個(gè)參數(shù)，缺一不可。第一個(gè)參數(shù)是要傳遞的數(shù)據(jù)，第二個(gè)參數(shù)是允許通信的域，“*”代表不對(duì)訪(fǎng)問(wèn)的域進(jìn)行判斷，可理解為允許所有域的通信。
然后是iframe.html里偵聽(tīng)接收數(shù)據(jù)的代碼：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- var parentwin = window.parent;window.onmessage=function(e){
- document.getElementById("test").innerHTML = e.origin + "say:" + e.data;
- parentwin.postMessage('HI!你給我發(fā)了"<span>'+e.data+'"</span>。',"*");};
JavaScript Code復(fù)制內(nèi)容到剪貼板
