iframe.contentWindow

来源：互联网发布：智明创发软件待遇编辑：程序博客网时间：2024/05/17 08:55

1、iframe.contentWindow(主页面调用iframe)

此处的iframe是从document取得的，即作作为document的子对象出现，虽然是文档(document)对象，但由于它是独立的页面，因而拥有自己的事件，拥有自己的窗口对象(contentWindow)；contentWindow属性是指指定的frame或者iframe所在的window对象。

在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。

先获取iframe里面的window对象，

var iframe = document.getElementById('myFrame').contentWindow// 在IE下var iframe = document.frames['myFrame']

再通过这个对象，获取到里面的DOM元素

var input = iframe.document.getElementById('test')

在主页面，操作iframe里面的DOM元素实例如下：

// a.html页面<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>            iframe.contentWindow        </title>        <script type="text/javascript">            function getValue() {                var tmp = '';                if(document.frames) {                    tmp += document.frames['myFrame'].document.getElementById('test').value;                } else {                    tmp = document.getElementById('myFrame').contentWindow.document.getElementById('test').value;                }                if(confirm(tmp)) {                    location.href = tmp.split(':')[1]                }            }        </script>    </head>    <body onload="getValue()">        <iframe id="myFrame" src='b.html' width="600px" height="100px;"></iframe>    </body></html>

b.html页面

// b.html页面<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>            iframe        </title>        <style>            #test {                border: solid royalblue 2px;                border-radius: 4px;                width: 500px;                color: #797979;                height: 50px;                line-height: 50px;                font-size: 20px;            }        </style>    </head>    <body>        <input type='text' id="test" value='欢迎访问：http://blog.csdn.net/qq_27626333'>    </body></html>

2、window.parent(iframe页面调用主页面)

在iframe本页面，要操作这个iframe的父页面的DOM元素（即嵌套这个iframe的页面）可以用：window.parent、window.top(这里的TOP是获取的顶层，即有多层嵌套iframe的时候使用)

// a.html页面<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>            iframe.contentWindow        </title>        <script type="text/javascript">            function parentValue() {                if(confirm('欢迎访问：http://blog.csdn.net/qq_27626333')) {                    location.href = 'http://blog.csdn.net/qq_27626333'                }            }        </script>    </head>    <body>        <iframe id="myFrame" src='b.html' width="510px" height="150px;"></iframe>    </body></html>

// b.html页面<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>            iframe        </title>        <style>            .contain {                display: flex;                flex-direction: column;                width: 500px;            }            #test {                border: solid royalblue 2px;                border-radius: 4px;                width: 100%;                color: #797979;                height: 50px;                line-height: 50px;                font-size: 20px;            }            #button {                border: solid #20A0FF 2px;                border-radius: 4px;                margin: 20px auto;                padding: 10px;                background-color: #20A0FF;                color: white;            }        </style>        <script>            function parentValue() {                window.parent.parentValue()            }        </script>    </head>    <body>        <div class="contain">            <input type='text' id="test" value='欢迎访问：http://blog.csdn.net/qq_27626333'>            <input type="button" id="button" value="调用主页面方法" onclick="parentValue()"/>        </div>    </body></html>

阅读全文

1 0