한국어
한국어
크로스 도메인은 프론트 엔드 개발에서 일반적인 문제입니다. 브라우저의 상 동성 정책 제한으로 인해, 크로스 도메인 요청은 일반적으로 차단되며, 이는 개발자에게 특정 문제를 제기합니다. 그러나 일부 특정 시나리오에서는 다른 하위 도메인간에 데이터 통신을 구현해야합니다. 이 기사에서는 문서를 사용하는 방법을 소개합니다. Domain 및 Iframe Technologies를 소개하여 구제 간 커뮤니케이션 문제를 해결합니다.
특정 솔루션으로 뛰어 들기 전에 먼저 Document.Domain의 역할을 이해해 봅시다. document.domain은 현재 문서의 도메인 이름을 지정하는 문자열 속성입니다. 페이지의 URL이 "http://www.example.com"인 경우 document.domain = "example.com"을 설정하여 페이지의 도메인 이름을 "example.com"으로 변경하여 하위 도메인에서 통신을 허용 할 수 있습니다.
먼저, 우리는 데이터 통신을위한 대중 교통 스테이션 역할을하는 기본 도메인 이름으로 부모 페이지를 만듭니다. 하위 도메인의 일관성을 유지하려면 Document.Domain을 설정해야합니다. 특정 단계는 다음과 같습니다.
// 부모 페이지 (http://www.example.com) document.domain = "example.com";
다음으로, 기본 도메인 이름 아래에 iframe을 생성하고 하위 도메인 이름으로 페이지를로드합니다.
// 부모 페이지 (http://www.example.com) <iframe src="http://sub.example.com/child.html"></iframe>
하위 도메인 페이지에서 Document.Domain도 부모와 자식 도메인 간의 정상적인 의사 소통을 보장하기 위해 기본 도메인 이름으로 설정해야합니다. 특정 작업은 다음과 같습니다.
// 하위 도메인 이름 페이지 (http://sub.example.com/child.html) document.domain = "example.com";
하위 도메인 페이지에서 Window.parent 객체에 액세스하면 상위 페이지의 전역 변수 및 메소드를 얻을 수 있습니다. 이를 활용하여 하위 도메인을 통한 하위 도메인 페이지의 상위 페이지에 요청을 적극적으로 보낼 수 있습니다. 코드는 다음과 같습니다.
// 하위 도메인 이름 페이지 (http://sub.example.com/child.html) var parentwindow = window.parent; ParentWindow.postMessage ( "안녕하세요, 부모 페이지!", "http://www.example.com");
학부모 페이지에서는 메시지 이벤트를 들으면 어린이 페이지에서 보낸 메시지를받을 수 있습니다. 코드 예제는 다음과 같습니다.
// 부모 페이지 (http://www.example.com)
window.addeventListener ( "메시지", function (event) {
Console.log ( "하위 페이지에서받은 메시지 :" + event.data);
}, 거짓);document.domain과 iframe을 결합하여 하위 도메인에서 데이터 통신을 구현할 수 있습니다. 이 방법은 상위 도메인 및 하위 도메인과 동일한 시나리오에 적합하며 개발자가 교차 보관함으로 인한 문제를 해결하는 데 도움이 될 수 있습니다. 구현 프로세스 중에 개발자는 보안에 특별한주의를 기울이고 잠재적 인 보안 취약점을 피해야합니다. 이런 식으로, 우리는 도메인 교차 도메인 문제를보다 효율적으로 처리 할 수 있습니다.
