포스트 메시지 사용법에 대한 자세한 설명
- 藏色散人원래의
- 2020-02-17 11:13:228479검색
#### ## ## ## ## ## ## ## ############## ## ################################
웹 페이지 간 데이터 전송은 ajax 요청을 사용하여 수행할 수 있다는 것은 누구나 알고 있습니다. 오늘은 제가 배운 postMessage가 페이지 간 데이터 요청을 완료하는 방법을 요약하겠습니다. 우선, postMessage는 크로스 도메인 문제를 해결하기 위한 HTML5의 새로운 방법입니다. 그러면 그는 그것을 어떻게 사용합니까? 여기서 사례를 공유하겠습니다.
html 비디오 튜토리얼
아래 코드를 보세요:test.html# 🎜 🎜#<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
<script>
onmessage=function(e){
e=e||event;
document.write("my name is ",e.data);
document.body.style.background = 'red';
};
</script>
</html>1.html
<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
</body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//给框架网页发送消息，然后收到之后，会传送过来。
f.οnlοad=function(){
setTimeout(function(){
f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
},3000)
}
</script>
</html>일단 원리는 이렇습니다. 제 케이스 코드를 예로 들어보겠습니다.
1.html은 iframe 웹 페이지 프레임워크에 내장되어 있으며, 여기서 1.html이 로드된 후 그는 주도적으로 test.html을 Nicholas Tse로 보냅니다. test.html이 수집되면 메시지 수신을 위한 처리 기능이 있습니다. 메시지를 받은 후 즉시 웹 페이지에 문자열을 반환한 다음 배경을 빨간색으로 변경합니다. 이는 웹페이지 상호작용의 효과를 얻습니다. 불행하게도 사악한 ie6.7은 이를 지원하지 않으며 호환성도 높지 않습니다. 참고: postMessage 작성 시 postMessage 앞에 작성하는 내용은 통신하려는 창 개체(즉, 통신하려는 대상)입니다. 이때 window.parent의 권한은 다음과 같습니다. 이는 이것으로 제한되며 동일한 도메인과 마찬가지로 상위 DOM 요소를 가져오는 것처럼 사용할 수 없습니다. 그렇지 않으면 브라우저는 교차 도메인 액세스를 수행할 수 없다는 오류를 보고합니다. postMessage에서 수신된 매개변수를 살펴보겠습니다. 첫 번째 매개변수는 다른 창에 전달하려는 데이터입니다(문자열 형식만 전달 가능). 두 번째 매개변수는 보안상의 이유로 대상 창의 소스, 프로토콜 + 호스트 + 포트 번호를 나타냅니다. "*"로 설정된 경우 , 이는 모든 창에 전달될 수 있음을 의미합니다.
위는 단일 페이지 상호 작용이고, 다음은 두 페이지 상호 작용입니다. 실제로는 동일하지만 두 페이지 모두 이벤트 전송을 수신하기 위해 작성되었습니다.
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
<h1 class="header">page B</h1>
<input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button>
</body>
<script>
window.addEventListener('message', function(ev) {
// if (ev.source !== window.parent) {return;}
var data = ev.data;
document.write("my name is ",data);
document.body.style.background = 'red';
}, false);
function send() {
var data = document.querySelector('#inp').value;
parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致，则postMessage失败
// parent.postMessage(data, '*'); // 触发父页面的message事件
}
</script>
</html>1.html
<!DOCTYPE html>
<html>
<head>
<title>window.postMessage</title>
<meta charset="utf-8"/>
<h1>test接收区</h1>
</head>
<body>
<h1 class="header">page A</h1>
<div class="mb20">
<textarea name="ta" id="data" cols="30" rows="5">hello world</textarea>
<button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe>
<script>
function send() {
var data = document.querySelector('#data').value;
window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件
}
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.info('message from child:', data);
document.write("收到了数据： ",data);
document.body.style.background = 'red';
}, false);
</script>
</body>
</html>마찬가지로 1.html이 메인 페이지입니다. HTML을 열면 상호 작용할 수 있습니다.
더 많은 프로그래밍 관련 학습을 원하시면 php中文网
프로그래밍 소개동영상 튜토리얼 채널을 주목해주세요!
위 내용은 포스트 메시지 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!