지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > HTML5_html5 튜토리얼 기술에서 postMessage를 사용하여 Ajax 도메인 간 요청을 구현하는 방법

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

WBOY
풀어 주다： 2016-05-16 15:51:55
원래의
1570명이 탐색했습니다.

동일 출처 정책의 제한으로 인해 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. <입력 유형="제출"/>

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

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

JavaScript 코드

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



JavaScript 코드

클립보드에 콘텐츠 복사
var
  1. parentwin = window.parent;window.onmessage=함수(e){  document.getElementById(
    2. "test"
  2. ).innerHTML = e.origin "say:" e. 데이터 parentwin.postMessage(
    3. '안녕하세요! "'
  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를 호출해야 합니다. (시간이 오래 걸렸어요)

관련 라벨：
postmessage
원천：php.cn
이전 기사：HTML5 Canvas API_html5 튜토리얼 팁의clearRect() 메소드를 사용하여 지우개 기능 구현 다음 기사：웹페이지에 있는 전화번호의 원클릭 직접 통화 효과를 구현하는 방법_예제_html5 튜토리얼 기술 포함
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
AJAX POST 요청의 필드 업데이트 jQuery 또는 Javascript를 사용하여 AJAXPOST 요청에서 사용자 정의 필드를 동적으로 업데이트하려고 합니다. AJAXPOST 요청은 WordPre...
에서 2024-04-02 11:45:41
0
1
360
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿