HTML5_html5 튜토리얼 기술에서 postMessage를 사용하여 Ajax 도메인 간 요청을 구현하는 방법

동일 출처 정책의 제한으로 인해 Javascript에는 도메인 간 통신 문제가 있습니다. 일반적인 크로스 도메인 문제에는 iframe과 상위 간 통신 등이 포함됩니다.

몇 가지 일반적인 해결 방법:

(1) document.domain iframe;
(2) 동적으로 스크립트 생성
(3) iframe location.hash
(4) 플래시.

여기에서는 이러한 방법에 대해 자세히 설명하지 않겠습니다. HTML5의 window.postMessage가 기록됩니다.
postMessage는 IE8, Firefox, Opera, Safari 및 Chrome과 호환됩니다.

테스트에는 두 개의 외국 서버가 필요합니다. 물론 로컬 서버와 온라인 서버도 두 개의 외국 서버로 사용할 수 있습니다.
phonegap을 사용하여 개발하는 경우 클라이언트에 요청 파일을 설치한 후 서버의 데이터 처리를 동적으로 요청하여 데이터를 얻고 표시할 수 있습니다. 이러한 방식으로 모든 웹 개발 언어 및 방법을 사용하여 Phonegap 앱에 필요한 백엔드를 개발할 수 있습니다.

1. postMessage 사용

postMessage는 js 도메인 간 문제를 해결하기 위해 HTML5에서 도입된 새로운 API로, 여러 iframe/창을 허용합니다. 도메인 간 통신.

구조는 다음과 같다고 가정합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. test.html<섹션 id="래퍼"> <헤더>

2. postMessage(교차 도메인)

5. <양식>

6.   

7. <라벨
8. for="message">iframe에 메시지 보내기:    
9. <입력 유형=
10. "텍스트" 이름="메시지" 값="아들" id="메시지"/>  <입력 유형=
11. "제출"/> 

13. 대상 iframe의 정보:

15. "테스트">아직 정보가 없습니다
     
18. iframe.html
    

JavaScript 코드

클립보드에 콘텐츠 복사

1. iframe은 xiebiji.com
   을 가리킵니다.
2. <레이블 for="message">상위 창에 메시지 보내기: < / 라벨>
3. <입력 유형="텍스트" 이름="메시지" 값="아빠" id="메시지"/> 
4. <입력 유형="제출"/>

"test">아직 정보가 없습니다.

다음은 test.html의 Javascript 코드(데이터 전송)입니다: var win = document.getElementById("iframe" ).contentWindow;document.querySelector('양식').onsubmit=함수(e){ win.postMessage(document.getElementById(
5. "메시지").value,"*");
6. if (e.preventDefault)
e.preventDefault()
e.returnValue =
8. false; } 
키 코드는 단 한 문장입니다:

JavaScript 코드

클립보드에 콘텐츠 복사

win.postMessage(document.getElementById(

1. "message").value,"*")
PostMessage는 통신 객체의 메소드이므로 iframe과 통신하기 위해 iframe 객체는 postMessage 메소드를 호출합니다. postMessage에는 두 개의 매개변수가 있으며 그 중 하나는 필수입니다. 첫 번째 매개변수는 전달할 데이터이고, 두 번째 매개변수는 통신을 허용하는 도메인이다. "*"는 접속한 도메인을 판단하지 않는다는 의미로, 모든 도메인에서 통신이 허용되는 것으로 이해될 수 있다.

iframe.html에는 데이터 수신을 수신하는 코드가 있습니다.

JavaScript 코드

클립보드에 콘텐츠 복사

var

1. parentwin = window.parent;window.onmessage=함수(e){  document.getElementById(
"test"
2. ).innerHTML = e.origin "say:" e. 데이터 parentwin.postMessage(
'안녕하세요! "'
3. e.data '"을 보냈습니다. .',"*");};

   아주 간단해서 한 번 보시면 이해되실 거라 믿습니다. e.data에는 전송된 데이터가 포함되어 있으며 e.origin은 소스 도메인을 나타냅니다.
   
   그러면 iframe.html도 test.html로 응답 데이터를 보내고 test.html은 데이터를 받습니다. 코드가 비슷하면 코드를 게시하지 않겠습니다.

   2. Ajax 크로스 도메인 요청
   
   위의 크로스 도메인 통신을 바탕으로 iframe의 onmessage 처리 기능에 Ajax 코드를 넣으면 됩니다. html, postMessage에서 전달한 데이터를 매개 변수로 사용하여 test.html에 요청을 보낸 다음 postMessage를 사용하여 반환된 데이터를 test.html에 전달합니다. 이러한 방식으로 도메인 간 Ajax 요청이 구현됩니다. 실제로는 매우 간단한 일입니다.
   
   샘플 코드를 게시했지만 위 코드와는 아무런 관련이 없습니다.

   JavaScript 코드클립보드에 콘텐츠 복사

   1. (함수(){ //도메인 간 데이터 가져오기 window.onmessage = function(e){
   2. var url = "http://yangzebo.com/demo/noforget/test.php?msg="e.data;
   3. //Ajax var xhr = getXHR()
   4. if(xhr){
   5. xhr.open("GET",url,true)
   6. xhr.onreadystatechange = 변경 핸들
   7. xhr.send(null) }else{
   8. Alert("Ajax는 지원되지 않습니다.") }
   9. 함수changeHandle(){//반환 처리
   10. if(xhr.readyState == 4){
   11. var parentwin = window.parent
   12. parentwin.postMessage(xhr.responseText,"*");//도메인 간 데이터 전송
   13. } }
   14. 함수 getXHR(){//XMLHttpRequest 가져오기
   15. var xhr_temp; if(window.XMLHttpRequest){
   16. xhr_temp = new XMLHttpRequest()
   17. }else if(window.ActiveXObject){
   18. xhr_temp = new ActiveXObject("Microsoft.XMLHTTP")
   19. }else{
   20. xhr_temp = null
   21. } 
   22. xhr_temp 반환
   23. } };})()

   그런 다음 보기 흉한 데모를 보여주세요.
   
   코드 요청에 관심이 있으시면 개발자 도구를 사용하여 확인하시기 바랍니다. "zebo man"은 데이터베이스에서 읽혀지고 "my msg"는 sendAndReceive가 보낸 Ajax 요청의 매개변수입니다. .html을 test.php로 변환하고, test.php 및 iframeforAjax.html을 통해 sendAndReceive.html로 다시 전달됩니다.
   
   3. 팁
   
   postMessage를 호출하려면 iframe의 contentWindow를 가져와야 합니다.
   
   정상적으로 실행하려면 iframe이 로드된 후 postMessage를 호출해야 합니다. (시간이 오래 걸렸어요)