window.postMessage는 도메인 간 데이터 전송을 위해 자주 사용됩니다. 다음은 HTML5API의 기본 사용법 을 소개합니다. > 도움이 필요한 친구는
postMessage 소개
를 참조하세요. window.postMessage는 HTML5의 기능이라고 하지만 웹사이트에서는 IE8+를 지원하지 않습니다. IE6 및 IE7을 지원해야 하는 경우 window.postMessage를 사용할 수 있습니다. window.postMessage와 관련하여 많은 친구들이 도메인 간을 지원할 수 있다고 말했습니다. 예, window.postMessage는 클라이언트와 클라이언트 간의 직접적인 데이터 전송이며 도메인 간 또는 동일한 도메인 내에서 전송될 수 있습니다.응용 시나리오
간단한 응용 시나리오를 제시한 것 뿐입니다. 물론 이 기능은 여러 곳에 사용될 수 있습니다. 페이지가 있고 해당 페이지에서 사용자 정보의 일부를 가져오는 경우 다른 페이지로 들어가려면 클릭하세요. 기본적으로 사용자 정보의 일부를 해당 페이지에 전달할 수 있습니다. 이 페이지의 window.postMessage를 통해. (물론코드 예시
메시지 보내기:JavaScript Code复制内容到剪贴板 //弹出一个新窗口 var domain = 'http://haorooms.com'; var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow'); //周期性的发送消息 setTimeout(function(){ //var message = '当前时间是 ' + (new Date().getTime()); var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据,obj等 console.log('传递的数据是 ' + message); myPopup.postMessage(message,domain); },1000);
JavaScript Code复制内容到剪贴板 //监听消息反馈 window.addEventListener('message',function(event) { if(event.origin !== 'http://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的 console.log('received response: ',event.data); },false);
JavaScript Code复制内容到剪贴板 //捕获iframe var domain = 'http://haorooms.com'; var iframe = document.getElementById('myIFrame').contentWindow; //发送消息 setTimeout(function(){ //var message = '当前时间是 ' + (new Date().getTime()); var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据,obj等 console.log('传递的数据是: ' + message); //send the message and target URI iframe.postMessage(message,domain); },1000);
rreee
속성입니다.
source – 메시지 소스, 메시지 전송 창/iframe.origin – 데이터 소스를 확인하는 데 사용되는 메시지 소스의 URI(프로토콜, 도메인 이름 및 포트가 포함될 수 있음).
data – 발신자가 수신자에게 보낸 데이터입니다.
인스턴스 호출1. 메인 스레드에서 Worker 인스턴스를 생성하고 onmessage 이벤트를 수신합니다
JavaScript Code复制内容到剪贴板 //响应事件 window.addEventListener('message',function(event) { if(event.origin !== 'http://haorooms.com') return; console.log('message received: ' + event.data,event); event.source.postMessage('holla back youngin!',event.origin); },false);
2. Compute.js에서 postMessage 메소드를 호출하여 계산 결과를 반환합니다
JavaScript Code复制内容到剪贴板 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Test Web worker</title> <script type="text/JavaScript"> function init(){ var worker = new Worker('compute.js'); //event 参数中有 data 属性,就是子线程中返回的结果数据 worker.onmessage= function (event) { // 把子线程返回的结果添加到 p 上 document.getElementById("result").innerHTML += event.data+"<br/>"; }; } </script> </head> <body onload="init()"> <p id="result"></p> </body> </html>
위 내용은 HTML5에서 postMessage API의 기본 사용법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!