Javascript - Working with Frames

javascript
javascript-dom

http://xkr.us/articles/dom/iframe-document/
http://www.bennadel.com/blog/1592-Getting-IFRAME-Window-And-Then-Document-References-With-contentWindow.htm
http://www.dyn-web.com/tutorials/iframes/ - Scripting Iframes - Tutorial and Examples
http://www.cakemail.com/blog/the-iframe-cross-domain-policy-problem/ - The iframe cross-domain policy problem
http://davidwalsh.name/window-iframe window.postMessage - Tip: Child-To-Parent Communication
http://www.cs.tut.fi/~jkorpela/html/iframe.html
http://benvinegar.github.com/seamless-talk/#/
http://davidwalsh.name/iframe-permission-denied
https://www.tinfoilsecurity.com/blog/protect-your-website-from-embedded-content-iframe-security
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-inject-custom-html-and-css-into-an-iframe/
http://support.microsoft.com/kb/278469 - How To Resize an IFrame to the Size of Its Contents Without Displaying Scroll Bars
AJAX Tutorial: A Tale of Two IFrames (or, How To Control Your Browsers History)
Avoiding browser history when changing iframe src

// JavaScript - Working with frames:

top.frames.length
top.frames[0].name
top.frames['frameName'].name
top.frameName.name
top.frames[0].document
top.frames[0].contentDocument
top.frames[0].contentWindow
top.frames[0].contentWindow.document

// To access a variable defined in the parent frame:
parent.propertyName

// To invoke a function that is defined in the parent frame:
parent.functionName([parameters]);
var returnValue = parent.functionName([parameters]);

.parent is used in a frames context where the code in the child frame need to 
access a variable or invoke a function that was defined in the parent / 
container frame or document. .opener is used when a pop-up is created via 
window.open. The code in the pop-up window can access a variable or invoke a 
function that is defined in the previous window by using the .opener property.

// The problem with iframes and browser history:

As it turns out there are two kinds of iframes have completely different 
behaviors when it comes to history in different browsers. The first kind of 
iframe are the ones that you create right within your HTML:

<html>
<body>
<iframe id="testFrame" src="http://www.google.com"></iframe>
</body>
</html>

The second kind of iframe are those that are created dynamically, through the 
DOM and JavaScript, after the page is finished loading:

<html>
<head>
<script language="JavaScript">
function initialize() {
  var testFrame = document.createElement("IFRAME");
  testFrame.id = "testFrame";
  testFrame.src = "http://www.google.com";
  document.body.appendChild(testFrame);
}
</script>
</head>
<body onload="initialize()"></body>
</html>

It turns out these two kinds of iframes have completely different behaviors 
when it comes to history in different browsers. In Firefox:

1. If the iframe is inside the HTML and was loaded in the page, any location 
   changes to it are stored in the browser's history.

2. If the iframe was written into the DOM after the page was finished loading 
   through JavaScript, then no location changes are stored in the browser's 
   history.

In Internet Explorer, both kinds of iframes store their location changes into 
the browser's history. If you have a static iframe that is loaded in the HTML, 
and that iframe has a src value initially:

<iframe src="http://www.google.com"></iframe>

then this initial value is not placed into the browser's history, only 
successive changes to that static iframe are placed into the history.

The problem happens when src attribute of the iframe is changed.

To avoid this problem, avoid changing the src attribute of the iframe.

First, you make them invisible using CSS. Then, you decide whether you want 
something to enter the history or not, choosing the appropriate kind of iframe. 
If you are using the iframe remote communication technique instead of 
XmlHttpRequest, for old browser compatibility, knowing the difference between 
these two kinds of iframes can be very useful, since you can choose whether 
remote iframe communication is placed into the history or not. If you want a 
URL to be added to the browser history, create an iframe with an empty src 
attribute (or without the src attribute at all), then change the value of the 
src attribute to the desired URL.

The issue was that Internet Explorer saved the iframe's old url in the history. 
The simple solution is to dynamically write the iframe with it's real src 
instead of having an iframe on the page and then changing it's src. You can do 
this:

var iframeHeaderCell = document.getElementById('wheretoputheiframe');
var dynamicURL = 'http://...' //your url
var iframeHeader = document.createElement('IFRAME');
iframeHeader.id = 'iframeHeader';
iframeHeader.src = dynamicURL ;
iframeHeader.width = ...;
iframeHeader.height = ...;
iframeHeader.scrolling = 'no';
iframeHeader.frameBorder = 0;
iframeHeader.align = 'center';
iframeHeader.valign='top'
iframeHeader.marginwidth = 0;
iframeHeader.marginheight = 0;
iframeHeader.hspace = 0;
iframeHeader.vspace = 0;
iframeHeaderCell.appendChild(iframeHeader);

What is the difference between .parent and .opener?

.parent is used in a frames context where the code in the child frame need to access a variable or invoke a function that was defined in the parent / container frame or document. .opener is used when a pop-up is created via window.open. The code in the pop-up window can access a variable or invoke a function that is defined in the previous window by using the .opener property.

How to work with frames?

top.frames.length
top.frames[0].name
top.frames['frameName'].name
top.frameName.name
top.frames[0].document
top.frames[0].contentDocument
top.frames[0].contentWindow
top.frames[0].contentWindow.document

How to access the value of a variable defined in the parent frame?

parent.propertyName

How to invoke a function that is defined in the parent frame?

parent.functionName([parameters]);
var returnValue = parent.functionName([parameters]);
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License