Invoke IFrame/window in cross domain in IE&FF notes
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