H5의 postMessage API에 대한 자세한 그래픽 및 텍스트 설명 자세한 소개
- php中世界最好的语言원래의
- 2017-12-02 14:45:053709검색
postMessage의 경우 HTML5 기능이지만 IE8+를 지원합니다. 웹사이트에서 IE6 및 IE7을 지원할 필요가 없다면 window.postMessage를 사용할 수 있습니다. 도메인 간 또는 동일한 도메인 내에서 이전될 수 있습니다.
간단한 적용 시나리오를 제시한 것 뿐입니다. 물론 이 기능은 여러 곳에 사용될 수 있습니다.
페이지가 있고 해당 페이지에서 일부 사용자 정보를 얻은 경우 다른 페이지로 들어가려면 클릭하세요. 다른 페이지는 기본적으로 사용자 정보를 가져올 수 없습니다. window.postMessage를 통해 이 페이지에 사용자 정보를 전달할 수 있습니다. (물론 보안 및 기타 측면을 고려해야 합니다.)
코드 예
메시지 보내기:
JavaScript 코드는 내용을 클립보드에 복사합니다.
//弹出一个新窗口
var domain = 'https://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);지연하려면 일반적으로 보내기 전에 지연하기 위해 setTimeout 타이머를 사용합니다.
수락 페이지
JavaScript 코드는 내용을 클립보드에 복사합니다
//메시지 피드백 듣기
window.addEventListener('message',function(event) {
if(event.origin !== 'https://haorooms.com') return; //这个判断一下是不是我这个域名跳转过来的
console.log('received response: ',event.data);
},false);아래와 같이 수락 페이지에서 데이터를 가져옵니다
iframe을 사용하는 경우 코드는 다음과 같아야 합니다. 다음과 같이 작성되었습니다:
JavaScript 코드 내용을 클립보드에 복사
//捕获iframe
var domain = 'https://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);데이터 승인
내용을 클립보드에 복사하는 JavaScript 코드
//响应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'https://haorooms.com') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);위의 코드 조각은 메시지 소스에 정보를 피드백하고 메시지가 메시지가 수신되었습니다. 다음은 몇 가지 중요한 이벤트 속성입니다:
source – 메시지 소스, 메시지 전송 창/iframe.
origin – 데이터 소스를 확인하는 데 사용되는 메시지 소스의 URI(프로토콜, 도메인 이름 및 포트가 포함될 수 있음).
data – 발신자가 수신자에게 보내는 데이터입니다.
인스턴스 호출
메인 스레드에서 Worker 인스턴스를 생성하고 onmessage 이벤트를 수신합니다.
JavaScript 코드는 콘텐츠를 클립보드에 복사합니다.
<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>클라이언트의 Compute.js에서는 다음의 간단한 반복입니다. 여러 번 sum 연산을 수행하고 최종적으로 postMessage 메소드를 통해 결과가 메인 스레드로 반환되며, 일정 시간 동안 대기하는 것이 목적이다. 이 기간 동안 메인 스레드가 차단되어서는 안 됩니다. 사용자는 브라우저 드래그, 브라우저 창 확대 또는 축소 등을 통해 이 현상을 테스트할 수 있습니다. 이 비차단 메인 스레드의 결과는 웹 작업자가 달성하고자 하는 것입니다.
compute.js는 postMessage 메소드를 호출하여 계산 결과를 반환합니다.
JavaScript 코드는 내용을 클립보드에 복사합니다.
var i=0;
function timedCount(){
for(var j=0,sum=0;j<100;j++){
for(var i=0;i<100000000;i++){
sum+=i;
}
}
// 调用 postMessage 向主线程发送消息
postMessage(sum);
}
postMessage("Before computing,"+new Date());
timedCount();
postMessage("After computing,"+new Date());이 사례를 읽으신 후 메소드를 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주의하시기 바랍니다. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!
관련 읽기:
위 내용은 H5의 postMessage API에 대한 자세한 그래픽 및 텍스트 설명 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!