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

무엇이 크로스 필드 입 니까?
무엇이 크로스 필드 입 니까?
크로스 도 메 인 이란 서로 다른 도 메 인 이름 아래 에 데이터 상호작용 이 존재 하면 이 럴 때 크로스 도 메 인 문제 가 존재 한 다 는 것 이다. 여기 서 설명 하고 자 하 는 것 은 같은 사이트 의 서로 다른 폴 더 에서 의 데이터 상호작용 은 크로스 도 메 인 문제 가 존재 하지 않 는 다 는 것 이다.
어떤 상황 에서 크로스 필드 문제 가 존재 합 니까?

주 역 과 자 역 사이 에 크로스 필드 문제 (예 를 들 어 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&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 방법 입 니 다. 관심 있 는 친구 들 은 직접 가서 볼 수 있 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[*기타*] 앱에서 외부 데이터 검색(JSONP편)

앱에서 외부 서버의 데이터를 취하고 싶은 경우의 JSONP편. 일반적으로 다른 도메인에 대해 Ajax 통신을 시도하면 화가납니다. 이것을 크로스 도메인 제약이라고 한다. 그래도 외부 서버의 데이터를 가져오는 것이 필...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

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

좋은 웹페이지 즐겨찾기