Invoke IFrame/window in cross domain in IE&FF notes

本文链接：https://blog.youkuaiyun.com/jackzhangyi/article/details/6531546

本文详细解析了网页中iframe元素的使用，包括如何在HTML页面中创建和配置iframe，以及如何在不同浏览器环境下访问和操作iframe内的元素。此外，还介绍了iframe在不同浏览器间的异步通信方法，包括在IE、Firefox等浏览器中通过document.frames和contentWindow获取和修改iframe内元素的方法。同时，文章还涵盖了iframe的自动高度调整、跨窗口通信以及跨iframe通信的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Define Iframe in page:

In html page:

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:

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>