page 2 of 8
RPC Using an Iframe
Data is returned in a complete, albeit minimal, (X)HTML page. Take a look at the source.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<script type="text/javascript">
function returnCall() {
var handle = null;
if (parent!=self) {
/* Get a handle to the outside of the iFrame */
if (this.frameElement) {
handle = this.frameElement;
} else if (parent.document.getElementById("rs-iframe")) {
handle = parent.document.getElementById("rs-iframe");
} else {
alert("Out of luck");
}
if (handle) {
handle.callBack(document.getElementById("data-wrapper").innerHTML);
}
}
}
window.onload = returnCall;
</script>
</head>
<body>
<div id="data-wrapper">
"Returned data"
</div>
</body>
</html>
There are a couple of interesting things going on here. First thing to note is that the onload event of the page loaded into the iframe begins processing the returned data. This way issues that exist when trying to determine the status of the iframe from the parent page are avoided.
The returnCall function, which is the onload event handler, is the work horse here. It sets up the call to the callBack function that processes the data. Here are the steps:
- It checks to ensure that the page is in a frame.
- Gets a reference to the iframe as seen by the parent window.
- Calls callback passing page data as a string.
callBack is a static method of the iframe; one created in the JavaScript and not a native method of the iframe. It can only be accessed from the parent window not a direct call from within the iframe. The purpose of most of the code in returnCall is to get a handle to the iframe from the perspective of the parent window.
The iframe has been extended with several methods and properties most having the same names and arguments as those of the XMLHttprequest object and a few that are unique. Later we'll see more about this. For now, knowing about the callBack method is enough.
A critical piece of the puzzle is the reference to the iframe from the perspective of the parent window. Without that, callback could not be called. The property frameElement is for this purpose, but it is not availible in some browsers so getElementById is a fallback option.
On load, the return data is passed as a string to the call back function. The main page can then use DHTML methods to display the data.
