포스트 메시지 사용법에 대한 자세한 설명-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

포스트 메시지 사용법에 대한 자세한 설명

藏色散人

Feb 17, 2020 am 11:13 AM

postmessage

#### ## ## ## ## ## ## ## ############## ## ################################

웹 페이지 간 데이터 전송은 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 = &#39;red&#39;;
};
</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(&#39;message&#39;, function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = &#39;red&#39;;
}, false);
 
function send() {
    var data = document.querySelector(&#39;#inp&#39;).value;
    parent.postMessage(data, &#39;http://localhost:8080/&#39;); // 若父页面的域名和指定的不一致，则postMessage失败
    // parent.postMessage(data, &#39;*&#39;); // 触发父页面的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(&#39;#data&#39;).value;
 
    window.frames[0].postMessage(data, &#39;http://localhost:8080/&#39;); // 触发跨域子页面的messag事件
}
 
window.addEventListener(&#39;message&#39;, function(messageEvent) {
    var data = messageEvent.data; 
    console.info(&#39;message from child:&#39;, data);
    document.write("收到了数据： ",data);
    document.body.style.background = &#39;red&#39;;
}, false);
</script>
</body>
</html>

로그인 후 복사

마찬가지로 1.html이 메인 페이지입니다. HTML을 열면 상호 작용할 수 있습니다.

더 많은 프로그래밍 관련 학습을 원하시면 php中文网

프로그래밍 소개

동영상 튜토리얼 채널을 주목해주세요!

위 내용은 포스트 메시지 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.