HTML and CSS Reference
In-Depth Information
documents directly. The first step is to add a listener to the page for the
message event that will call a function when a message is received:
window.addEventListener('message', receiver, false);
function receiver(e) {
document.getElementById('message').value = e.data;
}
This event listener can be added in both the parent and child pages.
The update_child() function then needs to be changed to call the post-
Message() method:
function update_child() {
var el =
document.getElementsByTagName(
'iframe')[0];
el.contentWindow
.postMessage(
'Updated from parent', '*'
);
}
The same postMessage() method can be called from the child to the parent:
function update_parent() {
parent
.postMessage(
'Updated from child',
'*'
);
}
Although this functionality allows you, the web developer, great
power, it also increases your responsibility. Now that the browser
has provided a way around a security restriction, you need to
provide your own security checks.
Search WWH ::




Custom Search