iframe.contentWindow

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>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页