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]);
