HTML 5 에서 postMessage 지식 포 인 트 를 사용 하여 Ajax 에서 POST 크로스 도 메 인 문 제 를 해결 합 니 다.

6411 단어 html5ajaxpost크로스 필드postmessage
같은 소스 정책 의 제한 으로 인해 자바 script 은 도 메 인 간 통신 문제 가 존재 하고 전형 적 인 도 메 인 간 문 제 는 iframe 과 부모 급 의 통신 등 이 있 습 니 다.일반적인 몇 가지 해결 방법:
(1) document.domain+iframe； (2)동적 으로 script 만 들 기;(3) iframe+location.hash； (4) flash。
postmessage 는 HTML 5 가 js 크로스 도 메 인 문 제 를 해결 하기 위해 도입 한 새로운 API 로 여러 개의 iframe/window 크로스 도 메 인 통신 을 허용 합 니 다.
HTML 5 는 웹 문서 간 에 서로 정 보 를 수신 하고 보 내 는 기능 을 제공한다.이 기능 을 사용 하면 웹 페이지 가 있 는 창 대상 의 인 스 턴 스 를 얻 으 면 같은 소스(도 메 인+포트 번호)의 웹 페이지 간 에 서로 통신 할 수 있 을 뿐만 아니 라 크로스 도 메 인 통신 도 실현 할 수 있 습 니 다.
브 라 우 저 지원 정도:IE8+,firefox 4+,chrome 8+  opera10+
1.우선,다른 창 에서 보 내 온 메 시 지 를 받 으 려 면 창 대상 의 message 사건 을 감청 해 야 합 니 다.다음 코드:


window.addEventListener(“message”, function(){},false);
2.그 다음 에 window 대상 의 postmessage 방법 으로 다른 창 에 메 시 지 를 보 내야 합 니 다.이 방법 은 다음 과 같이 정의 합 니 다.


otherWindow.postMessage(message, targetOrigin);
이 방법 은 두 개의 파 라 메 터 를 사용 합 니 다.첫 번 째 파 라 메 터 는 보 낸 메시지 텍스트 이지 만 모든 javascript 대상 일 수도 있 습 니 다.두 번 째 파 라 메 터 는 메 시 지 를 받 는 대상 창의 url 주소(예 를 들 어 http:127.0.1:8080/)입 니 다.그러나 우 리 는 url 주소 문자열 에서 마스크 를 사용 할 수 있 습 니 다.*"모든 도 메 인 아래 를 지정 할 수 있 습 니 다.그러나 우 리 는 특정한 도 메 인 이름 을 사용 하 는 것 을 권장 합 니 다.otherWindow 는 창 대상 에 대한 인용 을 보 냅 니 다.
데모 데모:
만약 지금 내 가 hosts 파일 아래 에 있다 면,두 개의 도 메 인 이름 을 다음 과 같이 연결 합 니 다.
127.0.0.1       abc.example.com
127.0.0.1        longen.example.com
현재 abc.example.com 필드 아래 abc.html 페이지 가 있다 면 longen.example.com 필드 아래 def.html 페이지 가 있 습 니 다.지금 은 이 두 개의 서로 다른 도 메 인 이름 의 페이지 가 서로 통신 되 기 를 바 랍 니 다.abc.html 코드 는 다음 과 같 습 니 다.

<form> 
   <p> 
    <label for="message" style="color:red;font-size:24px;"> iframe        ：</label> 
    <input type="text" name="message" value="send" id="message" /> 
    <input type="submit" value="submit" id="submit"/> 
   </p> 
</form> 
<h4>  iframe     ：</h4> 
<p id="test">    </p> 
 <iframe id="iframe" 
  src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>
JS 코드 는 다음 과 같 습 니 다.

var win = document.getElementById("iframe").contentWindow;
document.getElementById("submit").onclick = function(e){
  e.preventDefault();
  win.postMessage(document.getElementById("message").value,"http://longen.example.com"); 
} 
window.addEventListener("message",function(e){
   e.preventDefault();
   document.getElementById("test").innerHTML = " " + e.origin + "        :
" + e.data;
},false);
Def.html 코드 는 다음 과 같 습 니 다.
HTML 코드:

<form> 
   <p> 
    <label for="message">    abc.html    ：</label> 
    <input type="text" name="message" value="send" id="message" /> 
    <input type="submit" /> 
   </p> 
 </form> 
 <p id="test2">    。</p>
JS 코드 는 다음 과 같 습 니 다.

var parentwin = window.parent; 
window.addEventListener("message",function(e){
    document.getElementById("test2").innerHTML = "        " +e.origin + "，     ：" + e.data; 
    parentwin.postMessage('HI!     "<span>'+e.data+'"</span>。',"http://abc.example.com");
},false);
abc.html 페이지 를 클릭 하면 다음 과 같은 효 과 를 볼 수 있 습 니 다.def.html 에서 내용 을 되 돌려 줍 니 다.다음 과 같다.

우 리 는 다음 과 같은 몇 가지 정 보 를 알 아야 한다.
window 대상 의 message 사건 을 감청 함으로써 메 시 지 를 받 을 수 있 습 니 다.
message 이벤트 의 origin 속성 에 접근 하면 메시지 의 발송 원 을 얻 을 수 있 습 니 다.
message 이벤트 의 data 속성 에 접근 하면 메시지 내용 을 얻 을 수 있 습 니 다.
potmessage 방법 으로 메 시 지 를 보 냅 니 다.
message 이벤트 의 source 속성 에 접근 하면 메시지 전송 원 의 창 대상 을 얻 을 수 있 습 니 다(정확히 말 하면 창의 프 록 시 대상 일 것 입 니 다).
위의 기본 지식 점 이 있 으 면 ajax POST 크로스 도 메 인 을 실현 하 는 문제 로 확대 할 수 있 습 니 다.
2.postmessage 지식 점 을 사용 하여 ajax 에서 POST 크로스 도 메 인 문 제 를 해결 합 니 다.
원리:원리 도 간단 합 니 다.만약 에 우리 도 메 인 이름 abc.example.com 의 abc.html 페이지 가 ajax 요청(도 메 인 간,도 메 인 이름 은 longen.example.com)을 보 내야 한다 면 우 리 는 먼저 페이지 를 뛰 어 넘 는 문서 형식 입 니 다.위 와 마찬가지 로 우 리 는 지금 longen.example.com 아래 에 페이지 를 만 들 수 있 습 니 다.예 를 들 어 def.html 이 라 고 합 니 다.그러면 저 희 는 아직도 abc.html 페이지 에 숨겨 진 도 메 인 iframe src 경 로 를 삽입 하여 longen.example.com 도 메 인 에서 def,html 페이지 를 가리 키 고 있 습 니 다.프로 세 스 는 크로스 문서 와 유사 합 니 다.다만 현재 def.html 페이지 에서 window.onmessage 이벤트 에 ajax 요청 을 쓰 면 됩 니 다.다음 코드:
abc.example.com 의 abc.html 페이지 는 다음 과 같 습 니 다.
html 코드 는 위 와 같 고 아래 는 JS 코드 입 니 다.

var win = document.getElementById("iframe").contentWindow;
document.getElementById("submit").onclick = function(e){
   e.preventDefault();
   win.postMessage(document.getElementById("message").value,"http://longen.example.com/"); 
} 
window.addEventListener("message",function(e){
  e.preventDefault();
  alert(typeof e.data)
  var json = JSON.parse(e.data);
   console.log(json);
  alert(json.url)
},false);
def.html 코드 는 다음 과 같 습 니 다.
JS 코드 는 다음 과 같 습 니 다.

//       
window.onmessage = function(e){ 
   $.ajax({
     url: 'http://longen.example.com/webSocket/test.php',
     type:'POST',
     dataType:'text',
     //data: {msg:e.data},
     success: function(res) {
        var parentwin = window.parent; 
        parentwin.postMessage(res,"http://abc.example.com");//       
     }
   });
 };
test.php 코드 는 다음 과 같 습 니 다.

<?php 
  $data=array( 
   url =>1,
   name =>'2',
   'xx-xx'=>"xx"
 );
 echo json_encode($data);
?>
위의 실현 방식 과 같이 ajax post 크로스 도 메 인 을 실현 할 수 있 습 니 다.
이상 의 내용 은 HTML 5 에서 postmessage 지식 포 인 트 를 사용 하여 Ajax 에서 POST 크로스 도 메 인 문 제 를 해결 하 는 것 에 관 한 소개 입 니 다.마음 에 드 셨 으 면 좋 겠 습 니 다.
브 라 우 저 별 padding,margin 의 차이
spring boot 파일 서버 구축 여러 개의 그림 과 다운로드 문 제 를 동시에 업로드 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage