HTML5에서 postMessage API의 기본 사용법 공유-H5 튜토리얼-php.cn

HTML5에서 postMessage API의 기본 사용법 공유

黄舟

풀어 주다： 2017-03-15 16:26:07

원래의

2253명이 탐색했습니다.

window.postMessage는 도메인 간 데이터 전송을 위해 자주 사용됩니다. 다음은 HTML5API 의 기본 사용법 을 소개합니다. > 도움이 필요한 친구는

postMessage 소개

를 참조하세요. window.postMessage는 HTML5의 기능이라고 하지만 웹사이트에서는 IE8+를 지원하지 않습니다. IE6 및 IE7을 지원해야 하는 경우 window.postMessage를 사용할 수 있습니다. window.postMessage와 관련하여 많은 친구들이 도메인 간을 지원할 수 있다고 말했습니다. 예, window.postMessage는 클라이언트와 클라이언트 간의 직접적인 데이터 전송이며 도메인 간 또는 동일한 도메인 내에서 전송될 수 있습니다.

응용 시나리오

간단한 응용 시나리오를 제시한 것 뿐입니다. 물론 이 기능은 여러 곳에 사용될 수 있습니다.

페이지가 있고 해당 페이지에서 사용자 정보의 일부를 가져오는 경우 다른 페이지로 들어가려면 클릭하세요. 기본적으로 사용자 정보의 일부를 해당 페이지에 전달할 수 있습니다. 이 페이지의 window.postMessage를 통해. (물론

보안성별 등도 고려해야 합니다.)

코드 예시

메시지 보내기:

JavaScript Code复制内容到剪贴板
//弹出一个新窗口   
var domain = &#39;http://haorooms.com&#39;;   
var myPopup = window.open(domain    
            + &#39;/windowPostMessageListener.html&#39;,&#39;myWindow&#39;);   
  
//周期性的发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是  &#39; + message);   
    myPopup.postMessage(message,domain);   
},1000);

로그인 후 복사

지연하려면 일반적으로 setTimeout 타이머를 사용하여 전송하기 전에 지연합니다.

허용 페이지

JavaScript Code复制内容到剪贴板
//监听消息反馈   
window.addEventListener(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://haorooms.com&#39;) return; //这个判断一下是不是我这个域名跳转过来的   
    console.log(&#39;received response:  &#39;,event.data);   
},false);

로그인 후 복사

는 다음과 같습니다. 그림을 따라 데이터를 가져오려면 페이지를 수락하세요.

HTML5에서 postMessage API의 기본 사용법 공유

iframe을 사용하는 경우 코드는 다음과 같이 작성되어야 합니다.

JavaScript Code复制内容到剪贴板
//捕获iframe   
var domain = &#39;http://haorooms.com&#39;;   
var iframe = document.getElementById(&#39;myIFrame&#39;).contentWindow;   
  
//发送消息   
setTimeout(function(){   
    //var message = &#39;当前时间是 &#39; + (new Date().getTime());    
        var message = {name:"站点",sex:"男"}; //你在这里也可以传递一些数据，obj等   
    console.log(&#39;传递的数据是:  &#39; + 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(&#39;message&#39;,function(event) {   
    if(event.origin !== &#39;http://haorooms.com&#39;) return;   
    console.log(&#39;message received:  &#39; + event.data,event);   
    event.source.postMessage(&#39;holla back youngin!&#39;,event.origin);   
},false);

로그인 후 복사

클라이언트의 Compute.js에서는 단순히 합계 연산을 여러 번 반복하고 최종적으로 결과를 postMessage 메소드를 통한 메인 서버 스레드의 목적은 일정 시간 동안 기다리는 것입니다. 이 기간 동안 메인 스레드가 차단되어서는 안 됩니다. 사용자는 브라우저 드래그, 브라우저 창 확대 또는 축소 등을 통해 이 현상을 테스트할 수 있습니다. 이 비차단 메인 스레드의 결과는 웹 작업자가 달성하고자 하는 것입니다.

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(&#39;compute.js&#39;);    
  //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 중국어 웹사이트의 기타 관련 기사를 참조하세요!