The hidden frame method evolved with the introduction of iframes into HTML. An iframe is a frame that can be inserted anywhere in an HTML document, completely disconnected from any frameset. With this innovation, developers changed the hidden frame method to create hidden iframes on the fly for the purpose of communicating with the server.
To make use of iframes, you must make some changes to the getServerInfo()function:
var oHiddenFrame = null;
function getServerInfo() {
if (oHiddenFrame == null) {
oHiddenFrame = document.createElement(“iframe”);
oHiddenFrame.name = “hiddenFrame”;
oHiddenFrame.id = “hiddenFrame”;
oHiddenFrame.style.height = “0px”;
oHiddenFrame.style.width = “0px”;
oHiddenFrame.style.position = “absolute”;
oHiddenFrame.style.visibility = “hidden”;
document.body.appendChild(oHiddenFrame);
}setTimeout(function () {
frames[“hiddenFrame”].location.href = “HiddenFrameExampleCom2.htm”;
}, 10);}
The first change is the addition of a global variable names oHiddenFrame. Because the same frame can be used repeatedly for requests, there’s no reason to keep creating new iframes for each request. Instead, this global variable holds a reference to the iframe when it’s created. When getServerInfo()is called, it first checks to see if an iframe already exists by checking the value of oHiddenFrame. If it doesn’t exist, the frame is created using the DOM createElement()method.
Creating the iframe using the DOM is very specific. Both the nameand idattribute must be set to equal “hiddenFrame”in order for this to work in most browsers (some require nameto be set, others require id). Next, the appearance of the frame is specified to have a height and width of 0, an absolute position, and visibility set to “hidden”. All these changes are necessary to ensure that this new addition to the document doesn’t disrupt the display. Lastly, the iframe is added to the document body.
When the iframe has been created and added, it takes most browsers (notably Mozilla and Opera) a couple of milliseconds to recognize it as a new frame in the framescollection. To take this into account, the setTimeout()function is used to create a wait of 10 milliseconds before the request is sent. By the time the request executes, the browsers recognizes the new frame, and it’s sent off without a hitch. The only modification necessary to the page providing the response is to use parentinstead of parent.frames[0]to call handleResponse():
<html>
<head>
<title>Hidden Frame Example (Response)</title>
<script type=¡±text/javascript¡±>
window.onload = function () {
parent.handleResponse(document.forms["formResponse"].result.value);
};
</script>
</head>
<body>
<form name=¡±formResponse¡±>
<textarea name=¡±result¡±>This is some data coming from the
server.</textarea>
</form>
</body>
</html>
Now calling getServerInfo()has the exact same effect as the previous example using the traditional hidden frame technique. This technique requires, of course, that the browser support iframes in the first place, which leaves older browsers like Netscape Navigator 4.x out of the loop.