HTML5의 메시지 통신 코드에 대한 자세한 설명
- 零下一度원래의
- 2017-04-22 14:38:511818검색
HTML5는 문서 간 메시징(Cross-Document Messaging)을 지원합니다.
메시지 통신을 사용하기 때문에 이벤트가 발생해야 합니다. 이벤트의 생성과 소비에 따라 송신자와 수신자, 즉 Sender와 Listener를 찾을 수 있습니다.
Litener는 다음 작업을 수행해야 합니다.
메시지 처리 기능을 작성합니다.
메시지 처리 기능을 등록합니다. addEventListener('message', function, false);
발신자는 다음을 수행해야 합니다:
postMessage('이것은 메시지입니다 ' , 'http://www.php.cn');
이벤트 개체 이벤트에 포함된 멤버는 다음과 같습니다.
데이터 : 전달된 데이터
원본: 원본, 원본에는 호스트, 프로토콜, 포트의 세 가지 요소가 포함됩니다.
소스: 소스 개체; >
<!DOCTYPE html>
<html lang="en">
<!--
crossDomain.html by Bill Weinman
<http://bw.org/contact/>
created 2011-04-16
Copyright (c) 2011 The BearHeart Group, LLC
This file may be used for personal educational purposes as needed.
Use for other purposes is granted provided that this notice is
retained and any changes made are clearly indicated as such.
-->
<head>
<title>
HTML5 Messaging Template File (One)
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<style>
#frameTwo {
float: left;
width: 500px;
height: 400px;
margin: 0 5px;
padding: 3px;
border-top: 2px solid #3c6b92;
border-left: 2px solid #3c6b92;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}
#content { height: 500px; }
</style>
<script type="text/javascript">
// 域名
var originTwo = 'http://two.3sn.net';
// URL地址
var URLTwo = 'http://two.3sn.net/H5Msg/ExerciseFiles/Chap01/crossDomainTwo.html';
var windowTwo = null;
function handleMessage(event) {
// 判断源区域
if (event.origin == originTwo) {
if(!windowTwo) windowTwo = event.source;
log('message from origin: ' + event.origin);
log(event.data);
// 发送消息
windowTwo.postMessage('this is from windowOne!', originTwo);
log('message sent back to windowTwo');
} else {
dispError('message from untrusted origin: ' + event.origin);
}
}
function init() {
// 添加消息处理函数
window.addEventListener("message", handleMessage, false);
window.onerror = windowErrorHandler;
log('this is windowOne');
log('host: ' + location.host);
// load two页面
element('frameTwo').src = URLTwo; // load the frame
}
// ##### Utilities #####
// shortcut for getElementById
function element(id) { return document.getElementById(id); }
function clearDisp() {
element('pageResults').innerHTML = '';
element('message').innerHTML = '';
element('message').className = '';
}
function dispMessage(message) {
m = element('message');
m.className = 'message';
if(m.textContent.length > 0) {
m.innerHTML += '<br />' + message;
} else m.innerHTML = message;
}
function windowErrorHandler(message, filename, lineno) {
dispError(message + ' (' + filename + ':' + lineno + ')' );
return true;
};
function dispError(errorMessage) {
element('pageResults').innerHTML +=
errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : '';
}
function log(m) {
if(m.length < 1) return;
logElement = element('log');
if(logElement.textContent.length > 0) logElement.innerHTML += '<br />';
logElement.innerHTML += nowTimeString() + ' ' + m;
}
function nowTimeString() {
var d = new Date();
return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' +
numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3);
}
function numToString( num, len ) {
var num = num + '';
while(num.length < len) num = '0' + num;
return num;
}
window.onload = init;
</script>
</head>
<body>
<p id="content">
<h1>
HTML5 Messaging Template File (One)
</h1>
<p id="message"></p>
<p id="pageResults"></p>
<iframe id="frameTwo">
<p>Your browser doesn't support the iFrame feature</p>
</iframe>
<p id="log" style="font-family: monospace"></p>
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<!--
crossDomain.html by Bill Weinman
<http://bw.org/contact/>
created 2011-04-16
Copyright (c) 2011 The BearHeart Group, LLC
This file may be used for personal educational purposes as needed.
Use for other purposes is granted provided that this notice is
retained and any changes made are clearly indicated as such.
-->
<head>
<title>
HTML5 Messaging Template File (Two)
</title>
<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<script type="text/javascript">
var originOne = 'http://one.3sn.net';
function handleMessage(event) {
if (event.origin == originOne) {
log('message from origin: ' + event.origin);
log(event.data);
} else {
dispError('message from untrusted origin: ' + event.origin);
}
}
// ##### Init #####
function init() {
window.onerror = windowErrorHandler; // addEventListener doesn't provide the right error object in Firefox
window.addEventListener("message", handleMessage, false);
log('this is windowTwo');
log('host: ' + location.host);
var windowOne = parent;
windowOne.postMessage('this is from windowTwo!', originOne);
log('message sent to windowOne');
}
// ##### Utilities #####
// shortcut for getElementById
function element(id) { return document.getElementById(id); }
function clearDisp() {
element('pageResults').innerHTML = '';
element('message').innerHTML = '';
element('message').className = '';
}
function dispMessage(message) {
m = element('message');
m.className = 'message';
if(m.textContent.length > 0) {
m.innerHTML += '<br />' + message;
} else m.innerHTML = message;
}
function windowErrorHandler(message, filename, lineno) {
dispError(message + ' (' + filename + ':' + lineno + ')' );
return true;
};
function dispError(errorMessage) {
element('pageResults').innerHTML +=
errorMessage ? '<p class="error">' + errorMessage + '</p>\n' : '';
}
function log(m) {
if(m.length < 1) return;
logElement = element('log');
if(logElement.textContent.length > 0) logElement.innerHTML += '<br />';
logElement.innerHTML += nowTimeString() + ' ' + m;
}
function nowTimeString() {
var d = new Date();
return numToString(d.getUTCHours(), 2) + ':' + numToString(d.getUTCMinutes(), 2) + ':' +
numToString(d.getUTCSeconds(), 2) + '.' + numToString(d.getUTCMilliseconds(), 3);
}
function numToString( num, len ) {
var num = num + '';
while(num.length < len) num = '0' + num;
return num;
}
window.onload = init;
</script>
</head>
<body>
<p id="content">
<h1>
HTML5 Messaging Template File (Two)
</h1>
<p id="message"></p>
<p id="pageResults"></p>
<p id="log" style="font-family: monospace"></p>
</p>
</body>
</html>html5를 배워야 하는 학생들은 PHP 중국어 웹사이트 html5 비디오 튜토리얼에 주목하세요. 많은 html5 온라인 비디오 튜토리얼을 무료로 시청할 수 있습니다!
위 내용은 HTML5의 메시지 통신 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.