통신 방법은 IFRAME의 SRC 속성이 동일한 도메인 또는 크로스 도메인 링크에 연결되어 있는지 여부에 따라 다릅니다.
1. 같은 도메인에서 아버지와 아들 페이지 간의 커뮤니케이션
부모 페이지 parent.html
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수는 () {
Alert ( "parent.html");
}
함수 callchild () {
myframe.window.say ();
myframe.window.document.getElementById ( "button"). value = "Call End";
}
</스크립트>
</head>
<body>
<input id = "button"type = "button"value = "child.html says ()"onclick = "callchild ()"/>의 함수를 호출합니다.
<iframe name = "myframe"src = "child.html"> </iframe>
</body>
</html>
child.html
코드 사본은 다음과 같습니다.
<html>
<헤드>
<script type = "text/javaScript">
함수는 () {
경고 ( "child.html");
}
함수 callparent () {
parent.say ();
parent.window.document.getElementById ( "button"). value = "Call End";
}
</스크립트>
</head>
<body>
<입력 id = "button"type = "button"value = "parent.html에서 say () 함수를 호출"onclick = "callparent ()"/>
</body>
</html>
방법 호출
상위 페이지는 Child Page 메소드를 호출합니다. framename.window.childmethod ();
자식 페이지는 부모 페이지 메소드를 호출합니다 : parent.window.parentMethod ();
DOM 요소 액세스
페이지의 문서 개체를 얻은 후 DOM 요소에 액세스 할 수 있습니다.
주목해야 할 것
iframe이로드 된 후 작업이 수행되도록하려면 Iframe이 아직로드되지 않은 경우 내부의 메소드 나 변수를 호출하기 시작하면 오류가 발생합니다. iframe이로드되는지 여부를 결정하는 두 가지 방법이 있습니다.
1. iframe에서 Onload 이벤트를 사용하십시오
2. 문서를 사용하십시오. readipestate == "완료"를 판단합니다
2. Cross-Domain Parent-Son 페이지 커뮤니케이션 방법
iframe이 외부 페이지를 연결하는 경우 보안 메커니즘을 사용하지 않으므로 동일한 도메인 이름의 통신 방법을 사용할 수 없습니다.
학부모 페이지는 데이터를 하위 페이지로 전달합니다
구현 기술은 위치 객체의 해시 값을 사용하고 통신 데이터를 통과하는 것입니다. 부모 페이지에서 iframe의 SRC 후에 추가 데이터 문자열을 추가 한 다음 어떤 방식 으로든 예를 들어 다음과 같이 즉시 데이터를 얻을 수 있습니다.
1. SetInterval 메소드를 통해 하위 페이지에서 타이머를 설정하고 위치 변경 사항을 듣습니다. HREF 위의 데이터 정보를 얻으십시오.
2. 그런 다음 하위 페이지는이 데이터 정보를 기반으로 해당 논리적 처리를 수행합니다.
Child Page는 데이터를 상위 페이지로 전달합니다
구현 기술은 자식 페이지에 포함 된 프록시 iframe을 사용하는 것이며 부모 페이지와 동일한 도메인에 남아 있어야합니다. 그런 다음 위의 첫 번째 커뮤니케이션 메소드의 구현 원리를 완전히 활용하고 자식 페이지의 데이터를 프록시 iframe로 전달합니다. 그런 다음 프록시 iframe과 메인 페이지가 동일한 도메인에 있으므로 기본 페이지는 동일한 도메인을 사용 하여이 데이터를 얻을 수 있습니다. Browser의 최상위 창 객체에 대한 참조를 얻으려면 Window.top 또는 Window.parent.parent를 사용하십시오.