HTML5 크로스 도메인 정보 상호 작용 기술의 postMessage 코드 예제에 대한 자세한 설명
- 黄舟원래의
- 2017-03-16 15:53:181784검색
기존 HTML 사양에는 도메인 간 요청에 대한 엄격한 제한이 있다는 것을 알고 있습니다. 이러한 제한이 없으면 직장에서 회사 내부 관리 정보 시스템을 열 때 끔찍한 일이 일어날 것이라고 상상해 보십시오. 다른 외부 웹 페이지 JS 스크립트와 같은 외부 웹 페이지의 동적 스크립트는 회사 내부 관리 정보 시스템의 내용을 스니핑할 수 있습니다. 실제로 회사의 정보를 자신도 모르게 유출하여 회사에 큰 손실을 가져올 수 있으므로 브라우저에서는 이러한 크로스 도메인 접근을 차단합니다.
그러나 실제 생활에서는 크로스 도메인 사이트 간에 합리적인 상호 작용이 있습니다. 독자는 기존 HTML 사양의 크로스 도메인 솔루션을 알 수 있습니다.
예를 들어 iframe 메소드, jsonp 메소드 등. 오늘 제가 이야기하고 싶은 것은 HTML5의 도메인 간 데이터 상호작용에 대한 지식입니다.
HTML5에는 postMessage라는 새로운 API가 도입되었습니다. 실제로 postMessage에 도메인 간 작업이 있는지 여부에 관계없이 postMessage를 사용하여 메시지를 전달하는 것이 좋습니다.
더 이상 고민하지 말고 먼저 데모를 살펴보겠습니다.
우리는 두 개의 도메인 이름 http://www.yuetong.com/
을 구성합니다.
http://my.bbs.com/
http://www.yuetong.com/ 도메인 아래에 새로운 comm_main.html을 생성하고 주소는 http://www.yuetong.com/comm_main.html
입니다.
파일 내용은 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>跨站通信 当前域 http://www.yuetong.com</title>
<script type="text/javascript">
function sendMsg(){
if(typeof window.postMessage == undefined){
//
alert("对不起 您的浏览器不支持 postMessage 特性");
return false;
}
var msg = document.getElementById("message").value;
document.getElementsByTagName("iframe")[0].contentWindow.postMessage(msg,"http://my.bbs.com");
}
var originWhiteList = ["http://my.bbs.com"];
function checkWhiteList(origin){
for(var i=0; i< originWhiteList.length; i++){
if(origin == originWhiteList[i]){
return true;
}
}
return false;
}
/** 接受消息 */
function messageHandler(e){
if(checkWhiteList(e.origin)){
processMessage(e.data);
}else{
// ignore message
}
}
function processMessage(d){
alert(d);
}
window.addEventListener("message", messageHandler, true);
</script>
</head>
<body>
<h1>您好，我这里是http://www.yuetong.com/</h1>
<input type="text" name="message" id="message" value=""/>
<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
<br/>
<iframe name="msg" src="http://my.bbs.com/comm_client.html" width="400" height="400"/>
<p></p>
</body>
</html>
http://my.bbs.com/ 도메인 아래에 새로운 comm_client.html을 생성하고 주소는 http://my.bbs.com/comm_main.html이며 파일 내용은 다음과 같습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>跨站通信 当前域 http://my.bbs.com</title>
<script type="text/javascript">
var originWhiteList = ["http://www.yuetong.com"];
function checkWhiteList(origin){
for(var i=0; i< originWhiteList.length; i++){
if(origin == originWhiteList[i]){
return true;
}
}
return false;
}
function messageHandler(e){
if(checkWhiteList(e.origin)){
processMessage(e.data);
}else{
// ignore message
}
}
function processMessage(d){
var ta = document.getElementsByTagName("textarea")[0].value;
ta += d + "\n";
document.getElementsByTagName("textarea")[0].value = ta;
}
function sendMsg(){
var msg = document.getElementById("message").value;
window.top.postMessage(msg,"http://www.yuetong.com");
}
window.addEventListener("message",messageHandler,true);
</script>
</head>
<body>
<h1>您好，我这里是 http://my.bbs.com/</h1>
<input type="text" name="message" id="message" value=""/>
<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
<textarea name="msg" rows="15" cols="40"></textarea>
</body>
</html>
그림 1과 같이 입력창에 "Hello, friend"를 입력하면 iframe 창에 수신된 메시지를 확인할 수 있습니다.
사진 1
iframe 창에 "괜찮아요"라고 입력하면 메인 창에서 메시지를 받고 프롬프트 상자가 뜹니다 
가장 중요한 것은 메시지 메시지의 모니터링 및 처리와 신뢰 사이트 구성을 추가하는 것입니다.
위 내용은 HTML5 크로스 도메인 정보 상호 작용 기술의 postMessage 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!