JavaScript 의 크로스 필드 상세 설명 (원본 코드 첨부)

9177 단어 jsonp크로스 필드Ajaxhashwindow-nam
무엇이 크로스 필드 입 니까?
무엇이 크로스 필드 입 니까?
크로스 도 메 인 이란 서로 다른 도 메 인 이름 아래 에 데이터 상호작용 이 존재 하면 이 럴 때 크로스 도 메 인 문제 가 존재 한 다 는 것 이다. 여기 서 설명 하고 자 하 는 것 은 같은 사이트 의 서로 다른 폴 더 에서 의 데이터 상호작용 은 크로스 도 메 인 문제 가 존재 하지 않 는 다 는 것 이다.
어떤 상황 에서 크로스 필드 문제 가 존재 합 니까?
  • 주 역 과 자 역 사이 에 크로스 필드 문제 (예 를 들 어 www.a.com 와 www.a.b.com 가 존재 합 니 다.
  • 서로 다른 도 메 인 이름 에 도 메 인 간 문제 가 존재 합 니 다. 이 두 도 메 인 이름 이 같은 ip 주 소 를 가리 키 더 라 도.
    • 왜 ajax 는 도 메 인 을 뛰 어 넘 을 수 없 습 니까?ajax 은 XMLHttpRequest 이라는 대상 을 통 해 데이터 간 의 상호작용 을 하 는 것 이 고 XMLHttpRequest 안전 을 위해 크로스 도 메 인 상호작용 데 이 터 를 허용 하지 않 기 때문에 ajax 크로스 도 메 인 을 할 수 없다.
    크로스 필드 문제 의 몇 가지 해결 방식 은?
    1.jsonp
    무엇이 jsonp 입 니까? jsonp = json + padding (내 충전). 사실 그 는 내 충전 의 원 리 를 이용 하여 json 내 충전 의 물건 으로 한 상자 에 채 웠 습 니 다. 예 를 들 어 아래 와 같이 box{{name:"laowang"}};jsonp 한 가지 단점 은 단일 도 메 인 만 조작 할 수 있다 는 것 이다. 바로 우리 가 본 사 이 트 를 통 해 다른 사이트 의 데 이 터 를 수정 할 수 없다 는 것 이다.jsonp 을 사용 하여 도 메 인 을 넘 는 것 은 평소에 자주 사용 하 는 것 이다. script 라벨 의 형식 으로 script 라벨 은 도 메 인 을 넘 는 문제 가 존재 하지 않 고 우 리 는 이 를 jsonp 의 형식 이 라 고 통칭 한다.
    우 리 는 script 안에 있 는 src 을 요청 의 주소 로 사용 할 수 있 습 니 다. script 라벨 은 요청 js 파일 만 하 는 것 이 아니 라 요청 php 도 할 수 있 습 니 다. 이 페이지 가 연산 을 마치 고 돌아 온 결과 json 나 js 라면 문제 가 없 을 것 입 니 다.
    실례 1:
    </head>
<body>
<script type="text/javascript"> //a.com </script>

<!--           b   php  ， a            src     b   ，a              ，       b       ，            ，     a           b      -->

<script type="text/javascript" src="b.php?key=value&key2=value2"></script>
</body>

    실례 2:
    (jsonp.html)

<body>
<script type="text/javascript"> //a.com //         ，  box function box(json){ //      a              name    alert(json.name); } </script>

<script type="text/javascript" src="1.jsonp.js"></script>
</body>
    (jsonp.js)

//b.com
//            ，        b        
// ，                       。

box({name : 'laowang'});

    효과 표시 | | 소스 코드
    동적 생 성 jsonp
    (jsonp.html)

<script type="text/javascript"> function createJs(sUrl){ var oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = sUrl; document.getElementsByTagName('head')[0].appendChild(oScript); } createJs('jsonp.js?callbcak=box'); //   box     jsonp    box   ，      ， //           ,                 //               // ：?callbcak=box function box(json){ alert(json.name); } </script>
    (jsonp.js)

box({name : 'laowang'});

    효과 표시 | | 소스 코드
    2.location.hash location.hash 값 을 이용 하여 도 메 인 을 뛰 어 넘 을 수 있 습 니 다. 도 메 인 을 뛰 어 넘 는 것 은 요청 을 보 낸 다음 페이지 의 데 이 터 를 얻 는 것 일 뿐 입 니 다. iframe 를 통 해 도 메 인 을 뛰 어 넘 는 작업 을 할 수 있 습 니 다. 이 방법의 장점 은 도 메 인 작업 을 할 수 있다 는 것 입 니 다.
    원리: 예 를 들 어 내 가 location.hash 사이트 에 a 사 이 트 를 끼 워 넣 었 을 때 우 리 는 데 이 터 를 b 태그 로 도입 한 iframe 의 해시 값 에 추가 할 수 있다. 즉 script 해시 값 을 다 추가 한 후에 페이지 의 주 소 를 바 꾸 지 않 는 다. 그러면 데 이 터 를 php 사이트 에 가 져 갈 수 있다. 그리고 src="xxx.php#key1=value&amp;key2=value2"사 이 트 는 데이터 에 따라 분석 하고 데 이 터 를 되 돌려 주 며 b 사 이 트 는 b 을 통 해 본 페이지 의 a 값 을 업데이트 할 수 있다. 이때 parent.location.hash 사 이 트 는 hash 사이트 의 데 이 터 를 얻 을 수 있다.
    그러나 이 방법 은 다른 도 메 인 아래 의 것 이다. 안전 을 위해 어떤 브 라 우 저 는 지원 하지 않 는 다. 예 를 들 어 a 와 b 우 리 는 다른 도 메 인 에서 그의 아버지 급 을 직접 찾 을 수 없다. 그러면 우 리 는 ie 사이트 의 페이지 에서 chrome 사이트 의 페이지 를 다시 만 들 수 있다.
    예 를 들 어 새로운 페이지 a 를 만 든 다음 에 그 도 a 사이트 의 데 이 터 를 yyy.html 사이트 의 a 페이지 에 추가 하고 번 호 를 추가 한 후에 우 리 는 a 사이트 에서 이 방법 yyy.html 을 통 해데 이 터 를 가 져 옵 니 다. 그들 은 현재 같은 도 메 인 아래 에 있 기 때문에 a 값 을 바 꾸 어 이 두 도 메 인 간 의 데이터 교 류 를 할 수 있 습 니 다.
    3.window.name parent.location.hash = self.location.hash 로 도 메 인 을 뛰 어 넘 는 문 제 를 해결 할 수 있 습 니 다. 이것 은 비교적 안전 합 니 다. 내용 이 'window. name' 에 쓰 여 있어 서 노출 되 지 않 습 니 다.hash 대상 은 개 window.name 속성 이 있 습 니 다. 이 속성 은 하나의 창 window 의 수명 주기 에 창 이 불 러 온 모든 페이지 는 하나의 name 를 공유 하고 모든 페이지 는 읽 기와 쓰기 권한 이 있 습 니 다. (window) 는 한 창 이 불 러 온 모든 페이지 에 영구적 으로 존재 합 니 다.
    원리: 현재 두 개의 사이트 가 있 습 니 다. 이 두 사이트 아래 에 각각 한 페이지 window.name window.name 가 있 습 니 다. 그리고 우 리 는 window.name 사이트 의 www.a.com -->a1.html 아래 에 www.b.com -->b1.html 라벨 을 만 들 었 습 니 다. 그리고 a 지정 한 것 은 a1.html 사이트 데이터 iframe 페이지 입 니 다. 그리고 우 리 는 src 사이트 의 b 입 니 다.다음은 데 이 터 를 쓰 면 됩 니 다.
    다 쓴 후에 b1 를 불 러 온 후에 우 리 는 b 아래 에 b1.html window.name = ' '; 의 프 록 시 파일 을 만 들 었 습 니 다. a1 를 만 든 후에 프 록 시 파일 과 b1 는 공용 데이터 입 니 다. 이때 제 가 다시 요청 a1 할 때 프 록 시 를 통 해 데 이 터 를 찾 을 수 있 습 니 다.
    이것 과 www.b.com --> agent.html 의 원 리 는 차이 가 많 지 않 습 니 다. 모두 자신의 도 메 인 아래 에 현재 데이터 로 그 도 메 인 을 사용 할 프 록 시 파일 을 만 든 다음 에 프 록 시 와 현재 파일 이 같은 도 메 인 아래 에 있 는 원칙 을 통 해 데 이 터 를 제출 합 니 다.
    개인 적 으로 window.name 의 방법 은 복잡 하지 도 않 고 거의 모든 브 라 우 저 를 호 환 할 수 있다 고 생각 합 니 다. 이것 은 정말 좋 은 크로스 오 버 방법 입 니 다.
    4.document.domain
    하위 영역 과 주 영역 사이 에 모두 설정 a1.html하위 영역 과 주 영역 hash 을 같은 주 영역 으로 설정 합 니 다. 전제조건: 이 두 도 메 인 은 같은 기본 도 메 인 에 속 해 야 합 니 다. 또한 사용 하 는 프로 토 콜 은 포트 가 일치 해 야 합 니 다. 그렇지 않 으 면 window.name 을 이용 하여 도 메 인 을 넘 을 수 없습니다.
    5. 서버 에이전트
    서로 다른 도 메 인 이름 에서 서버 프 록 시 를 통 해 해결 합 니 다. 서버 프 록 시 는 서버 아래 에서 이 대상 document.domain = ' '； 의 프 록 시 파일 을 만 든 다음 에 서버 에서 연산 을 합 니 다. 그의 장점 은 원 하 는 데이터 상호작용 을 할 수 있다 는 것 입 니 다. 서버 의 압력 을 증가 시 키 는 것 이 단점 입 니 다.
    6.flash document.domain 도 도 메 인 을 뛰 어 넘 는 문 제 를 해결 할 수 있다.
    7.postMessage document.domain 는 XMLHttpRequest 방법 입 니 다. 관심 있 는 친구 들 은 직접 가서 볼 수 있 습 니 다.
    Extjs 여러 매개 변수 전달
    ajax 의 특성 및 어 지 러 운 코드 등

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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