iframe 하위 페이지와 상위 페이지 간의 도메인 내 및 도메인 간 통신의 예
- 一个新手원래의
- 2017-09-11 09:26:062505검색
iframe 서브 페이지와 상위 페이지 간의 통신은 오랫동안 철저하게 연구되었습니다. 이 콘텐츠를 이전에 사용해 본 적이 없어서 오늘 갑자기 질문이 생겨서 시도해 보았습니다. Tencent 팀이 사용하는 도메인 간 통신 주어진 메신저.js의 소스 코드도 매우 간단하고 볼만한 가치가 있습니다. 공식 데모는 매우 포괄적입니다.
도메인 내 통신
상위 페이지
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
function sayHello(){
alert("iframeCommunication1.html");
} function say(){
child1.window.sayHello();
child1.window.document.getElementById("button_c").value = "the call is complete";
}</script></head><body><h1>iframe子页面与父页面同域通信</h1>调用子页面child1.html中的sayHello()函数：<input type="button" id="button_p" name="hello" value="call" onclick="say()"><br><br><iframe src="child1.html" id="child1"></iframe></body></html>하위 페이지
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(同域)</title><meta charset="utf-8"><script type="text/javascript">
function sayHello(){
alert("child.html");
} function say(){
parent.sayHello();
parent.window.document.getElementById("button_p").value = "the call is complete";
}</script></head><body><p>调用父页面iframeCommunication1.html中的sayHello()函数：</p><input type="button" id="button_c" name="hello" value="call" onclick="say()"></body></html>도메인 간 통신
IE8+ 및 최신 브라우저의 경우 도메인 간 통신은 주로 html5에서 제공하는 postMessage API를 사용하여 도메인 간 통신을 수행합니다. postMessage의 기능은 프로그래머가 도메인에 걸쳐 두 개의 창/프레임 간에 데이터 정보를 보낼 수 있도록 하는 것입니다. 기본적으로 이는 도메인 간 AJAX와 비슷하지만 브라우저와 서버 간에 상호 작용하는 대신 두 클라이언트 간에 통신합니다.
구형 브라우저의 경우 메신저.js는 navigator 객체를 상위 창과 iframe 간에 공유하는 기능을 사용합니다. navigator 객체에 메시지 콜백 기능을 등록하여 정보 전달 및 공유를 구현합니다.
매우 간단한 예는 다음과 같습니다.
상위 페이지
<!DOCTYPE html><html><head><title>iframe子页面与父页面通信(跨域)</title><meta charset="utf-8"><script src="js/messenger.js"></script></head><body><h1>iframe子页面与父页面跨域通信</h1>向子页面child2.html发送信息：<input type="button" id="button_p" value="call" onclick="sendMessage('child2')"><br><br>获取信息：<pre id="output">