#### ## ## ## ## ## ## ## ############## ## ################################
웹 페이지 간 데이터 전송은 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>
<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!