Define Iframe in page:
In html page:
<iframe id = ' iId ' name = ' iName ' src = ' srcPage.html ' scrolling = ' no ' frameborder = ' 0 ' ></ iframe >
In javascript:
var frame = document.createElement("iframe");
frame.src = "iframePage.html";
document.body.appendChild(frame);
Invoke element of iframe in IE:
1. Through document.frames["IframeName"]:
alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' )[ 0 ] . firstChild . data ) ;
2. Use contentWindow to get it:
window
.
onload
=
(
function
()
{
var
iObj
=
document
.
getElementById
(
'
iId
'
)
.
contentWindow
;
alert
(
iObj
.
document
.
getElementsByTagName
(
'
h1
'
)[
0
]
.
firstChild
.
data
)
;
})
;
3. Update the content of element of iframe:
iObj . document . getElementsByTagName ( 'h1' )[ 0 ] . innerHTML = "override cotent of element" ;
Invoke element of iframe in FF:
var
iObj
=
document
.
getElementById
(
'
iId
'
)
.
contentWindow
;
iObj
.
document
.
open
()
;
iObj
.
document
.
writeln
(
'
<html><head>
'
)
;
iObj
.
document
.
writeln
(
'
<style>body {background:#000;}</style>
'
)
;
iObj
.
document
.
writeln
(
'
</head><body></body></html>
'
)
;
iObj
.
document
.
close
()
;
Iframe auto-height:
window
.
onload
=
(
function
()
{
var
iObj
=
document
.
getElementById
(
'
iId
'
)
;
iObj
.
height
=
iObj
.
contentWindow
.
document
.
documentElement
.
scrollHeight
;
})
;
Cross Window
ParentWindow.html:
var obj = {"prop1":"Hello","prop2":"Whats Up","prop3":{"subProp1":"Hi","subProp2":"Yeah Yeah"}};
obj["func1"] = function(){ alert("this is a test"); };
var w = window.open("childWindow.html","newWindow");
w.setObj(obj);
w.alertObj();
alert(typeof w.childObj["func1"]);
ChildWindow.html:
var childObj;
window.setObj = function(o) {
childObj = o;
}
window.alertObj = function() {
alert(typeof childObj["func1"]);
}
// 1. Firstly will alert object in childWindow.html
// 2. Secondly will alert function in parentWindow.html
Cross Iframe:
Parent Window.html:
<html>
<head></head>
<body></body>
<script type="text/javascript">
var obj = { "prop1": "Hello", "prop2": "Whats Up", "prop3": { "subProp1": "Hi", "subProp2": "Yeah Yeah"} };
obj["func1"] = function () {
alert("this is a test");
};
var frame = document.createElement("iframe");
frame.src = "childWindow.html";
frame.onload = function () {
frame.contentWindow.setObj(obj);
frame.contentWindow.alertObj();
alert(typeof frame.contentWindow.childObj["func1"]);
}
document.body.appendChild(frame);
</script>
</html>
ChildWindow.html:
<script type="text/javascript">
var childObj;
window.setObj = function (o) {
childObj = o;
}
window.alertObj = function () {
alert(typeof childObj["func1"]);
}
</script>
// 1. Firstly will alert function
// 2. Secondly will alert function