이 기사 예제는 임베디드 IFRAME 하위 페이지의 방법과 부모 페이지 JS 커뮤니케이션의 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
iframe 프레임 워크의 페이지와 메인 페이지 사이의 통신 방법은 iframe의 SRC 속성이 동일한 도메인 또는 크로스 도메인 링크에 연결되어 있는지 여부에 따라 분명히 다릅니다. 동일한 도메인의 데이터 교환 및 DOM 요소 상호 액세스는 훨씬 간단하지만 크로스 도메인은 의사 소통을 달성하기위한 영리한 방법이 필요합니다.
1. 같은 도메인에서 아버지와 아들 페이지 간의 커뮤니케이션
부모 페이지 parent.html :
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
함수는 () {
ALERT ( "parent.html ------> 나는 부모에 있습니다. html에 있습니다");
}
함수 callchild ()
{
//document.frames ].window.say() ;// IE 브라우저에만 적용됩니다
myframe.window.say ();
myframe.window.document.getElementById ( "button"). value = "I Change";
}
</스크립트>
</head>
<body>
<입력 유형 = 버튼 값 = "CallChild ()">
<iframe name = "myframe"src = "child.html"> </iframe>
</body>
</html>
Subpage Child.html :
다음과 같이 코드를 복사하십시오. <html>
<헤드>
<script type = "text/javaScript">
함수는 ()
{
Alert ( "child.html ---> 나는 child.html에 있습니다");
}
함수 callparent () {
parent.say ();
parent.window.document.getElementsByName ( "myframe") [0] .style.height = "100px";
}
</스크립트>
</head>
<body>
<입력 id = "버튼"유형 = 버튼 값 = "parent.html에서 say () 함수를 호출"onclick = "callparent ()">
</body>
</html>
방법 호출
위의 예에서 볼 수 있듯이, 부모 페이지의 자식 페이지를 호출하는 방법은 다음과 같이 사용할 수 있습니다 : framename.window.childmethod (); (이 방법은 다양한 브라우저와 호환됩니다)
부모 페이지를 호출하는 어린이 페이지의 메소드 : parent.window.parentMethod ();
DOM 요소 액세스
framename.window에 따라 child window 객체를 얻은 후 DOM 요소에 액세스하는 것은 같은 페이지에서 DOM 요소에 액세스하는 것과 다르지 않습니다. 다음과 같이 코드를 복사 할 수 있습니다. document.getElementById (), document.
myframe.window.document.getElementById ( "Button") Windows를 생략 할 수 있습니다.
주목해야 할 것
iframe이로드 된 후 작업이 수행되도록하려면 iframe이로드되지 않으면 의심 할 여지없이 오류가 발생합니다. Iframe이로드되었는지 여부를 결정하는 두 가지 방법이 있습니다.
1. iframe에서 Onload 이벤트를 사용하십시오.
2. 문서를 사용하십시오. readipestate == "완료"를 판단합니다
2. Cross-Domain Parent-Son 페이지 커뮤니케이션 방법
iframe이 외부 페이지를 연결하는 경우 보안 메커니즘으로 인해 동일한 도메인 이름의 통신 방법을 사용할 수 없습니다.
학부모 페이지는 데이터를 하위 페이지로 전달합니다
구현 기술은 위치 객체의 해시 값을 사용하고 통신 데이터를 통과하는 것입니다. iframe의 SRC 다음에 추가 #Data 문자열 만 추가하면 (데이터는 전달하려는 데이터입니다), 어린이 페이지에서 특정 방식으로 데이터를 얻을 수 있습니다. 실제로 일반적인 방법은 다음과 같습니다.
1. SetInterval 메소드를 사용하여 위치의 변경 사항을 들으면 서브 페이지에서 타이머를 설정합니다.
2. 그러면 하위 페이지는이 데이터 정보를 기반으로 해당 논리적 처리를 수행 할 수 있습니다.
Child Page는 데이터를 상위 페이지로 전달합니다
구현 기술은 자식 페이지에 포함 된 프록시 iframe C를 사용하는 것입니다. 그런 다음 위의 첫 번째 커뮤니케이션 방법의 구현 원리를 사용하여 Child Page의 데이터를 IFRAMEC로 전달할 수 있습니다. 다음 질문은 iframec이 데이터를 메인 페이지 A로 전달하게하는 방법입니다. iframec과 메인 페이지는 동일한 도메인에 있기 때문에 동일한 도메인 이름에서 통신 문제인 데이터간에 데이터를 전달하는 것이 훨씬 쉬워집니다. 앞에서 논의한 바와 같이, 여기에서 자주 사용되는 속성 창을 사용할 수 있으며 (Window.parent.parent를 사용할 수도 있습니다) 브라우저에로드 된 최상위 창 객체에 대한 참조를 반환하여 부모 페이지의 메소드를 직접 사용할 수 있습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.