HTML and CSS Reference
In-Depth Information
The child page is similar:
<textarea id="message">
This is a message in the child frame
</textarea>
But this time, the
<button>
attempts to communicate with the parent:
<button onclick="update_parent()">Update parent</button>
When both pages are on the same
domain, it's possible to access the
elements of the child page directly
and do the same in reverse (access
the parent from the child):
function update_parent() {
var tb = parent.document
.getElementById('message');
tb.value = 'Updated from child';
}
But look what happens if the pages
are served from different domains:
<iframe width="600px"
height="200px"
src="http://www.boogdesign.com/
examples/messaging/child-
2.html">
</iframe>
The pages are otherwise identical, but now when you click Update
Child, the browser reports an error:
Exception: Permission denied for <http://localhost:8000> to get
property HTMLDocument.getElementById from <http://www.boogdesign.com>.
The cross-document messaging
API
allows you to work around this
security restriction, but it's slightly more complex than accessing the
