html5 문서 간 메시지 전송 예제 토론_html5 튜토리얼 기술
- WBOY원래의
- 2016-05-16 15:49:491360검색
윈도우 객체의 메시지 이벤트 모니터링
코드 복사
코드는 다음과 같습니다window .addEventListener("message", function(event) {
// 핸들러 코드
}, false)
window 객체의 postMessage() 메서드를 사용합니다. 다른 창으로 메시지를 보내는 방법은 다음과 같이 정의됩니다.
코드 복사
코드는 다음과 같습니다. 🎜>otherwindow.postMessage(message, targetOrigin)
이 메서드는 두 가지 매개변수를 사용합니다. 첫 번째 매개변수는 전송된 메시지의 텍스트이지만 임의의 JavaScript일 수도 있습니다. object(JSON을 통해 개체를 텍스트로 변환); 두 번째 매개변수는 메시지를 수신하는 개체 창의 URL 주소입니다. URL 주소 문자열에 와일드카드 "*"를 사용하여 모든 주소를 지정할 수 있지만 권장됩니다. 정확한 URL 주소를 사용하세요. otherwindow는 window 객체에 대한 참조를 보내는 것입니다. window.open() 메서드를 통해 객체를 반환하거나 window.frames에 일련 번호(색인) 또는 이름을 지정하여 단일 프레임에 속하는 창 객체를 반환할 수 있습니다. 정렬. 예제
코드 복사코드는 다음과 같습니다.
< !DOCTYPE html>
<제목>문서 간 메시징 예제
script type ="text/javascript">
$(function() {
// 메시지 이벤트를 수신합니다.
window.addEventListener("message", function(event) {
// 다른 페이지에서 보낸 지정된 URL 메시지를 무시합니다.
if(event.origin != "http://www.blue-butterfly.net") return
alert(event.data); . 🎜>}, false)
$("#iframeContent").load(function(event) {
// 하위 페이지로 메시지 보내기
this[0].postMessage("Hello" , " http://www.blue-butterfly.net/test/");
})
})
<제목>문서 간 메시징 예제
script type ="text/javascript">
$(function() {
// 메시지 이벤트를 수신합니다.
window.addEventListener("message", function(event) {
// 다른 페이지에서 보낸 지정된 URL 메시지를 무시합니다.
if(event.origin != "http://www.blue-butterfly.net") return
alert(event.data); . 🎜>}, false)
$("#iframeContent").load(function(event) {
// 하위 페이지로 메시지 보내기
this[0].postMessage("Hello" , " http://www.blue-butterfly.net/test/");
})
})