iframe 도메인 간 통신 encapsulation_jquery에 대한 자세한 설명

iframe 도메인 간 통신

데모 보기 소스 코드 다운로드

우리 모두 알고 있듯이 도메인 간 액세스에 대한 프런트엔드 자바스크립트의 보안 제한으로 인해 자바스크립트는 해당 콘텐츠가 포함된 문서와 동일한 도메인에 있는 콘텐츠에만 액세스할 수 있습니다.

사용 예:

요구 사항은 http://www.demo.org/top.html에 iframe을 통해 http://www.iframe.com/iframe.html을 삽입하는 것입니다. iframe 페이지에서 버튼을 클릭하여 상단 페이지의 js 메소드를 호출하려고 합니다.

1. 내부 페이지에서 사용할 메소드를 상단 페이지에 생성합니다

코드 복사 코드는 다음과 같습니다.

함수 testFun(텍스트) {
경고(텍스트);
}

2. http://www.demo.org/top.html에 iframe

을 삽입하세요.

코드 복사 코드는 다음과 같습니다.

3. 도메인 간 통신을 위해 www.demo.org 도메인 http://www.demo.org/proxy.html에 프록시 페이지를 만듭니다

4. http://www.demo.org/proxy.html
에 프록시 페이지에 대한 논리를 추가합니다.

5. http://www.iframe.com/iframe.html페이지
에서 js를 통해 프록시 페이지 주소를 구성합니다.

코드 복사 코드는 다음과 같습니다.

TopProxyConfig = {url:'http://www.demo.org/proxy.html'};

6. Kissy를 통해 통신 모듈을 로드합니다

코드 복사 코드는 다음과 같습니다.

KISSY.use('topproxy', function(S, TopProxy){
//코드 실행
});

7. http://www.iframe.com/iframe.html에서 TopProxy.call을 통해 http://www.demo.org/top.html에 직접 액세스합니다.

과 같은 의 메서드

KISSY.use('topproxy', function(S, TopProxy){
 TopProxy.call('testFun', '这是一个真实的故事');
});

호출 메소드의 첫 번째 매개변수는 "."을 지원하는 외부 웹페이지의 전역 메소드 이름입니다. 다음 매개변수는 무제한이며 모두 대상 메소드에 전달됩니다.

참고:

1. 호출 직후 실행되지 않을 수 있습니다. iframe이 로드된 후에 실행될 것입니다. 미리 로드하려면 쓸모 없는 메소드를 미리 실행하면 됩니다.
2. TopProxyConfig가 설정되지 않은 경우 참조된 iframe과 상위 iframe이 동일한 도메인(대형 도메인)에 있는 것으로 간주되어 최상위 개체가 직접 호출됩니다.
3. IE678에서는 시스템 메소드가 적용을 지원하지 않기 때문에 상단의 시스템 메소드를 직접 호출할 경우 오류가 보고될 수 있습니다.

원칙:

페이지 A는 iframe 페이지 B에 포함되어 있습니다. B가 A의 메서드를 호출하고 데이터를 전달하려는 경우 B는 페이지 A와 동일한 도메인에 iframe 페이지 C를 포함할 수 있습니다. C는 window.top 창을 통해 A에 액세스할 수 있습니다. 그런 다음 B에서는 C의 href 해시를 변경하여 일부 정보를 C에 전달할 수 있습니다. 그런 다음 C는 해당 정보를 A에 전달하여 B가 A에 정보를 전송하는 목적을 간접적으로 달성합니다.