多个iframe间的js操作（含父子、兄弟操作）-前端ABC

1.parent.html

<html>
<head>
    <title>parent.html</title>
    <meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="http://www.bolue.cn/js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    var hello = 'hello';

    function getHelloWorld() {
        console.log('hello world');
    }
    </script>
</head>
<body>
    <div id="default" style=" width:200px; height:400px; float:left;">parent.html</div>
    <iframe id="iframeid" src="iframe.html" style=" width:400px; height:400px; float:left;"></iframe>
    <iframe id="mainFrame" src="iframexxx.html" style=" width:400px; height:400px; float:left;"></iframe>
</body>
</html>

2.iframe.html

<html>
<head>
    <title>iframe.html</title>
    <meta charset="utf-8">
    <script language="javascript" type="text/javascript" src="http://www.bolue.cn/js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            //在iframe中查找父页面元素
            console.log("在iframe中查找父页面元素:$('#default', window.parent.document).html()===");
            console.log($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的方法
            console.log('在iframe中调用父页面中定义的方法');
            parent.getHelloWorld();
            //在iframe中调用父页面中定义的变量
            console.log('在iframe中调用父页面中定义的变量');
            console.log(parent.hello);

            console.log('在iframe中调用父页面中的另一个iframe方法1');
            console.log(window.parent.window.frames['mainFrame']);
            console.log('在iframe中调用父页面中的另一个iframe方法2');
            console.log(window.parent.document.getElementById("mainFrame"));
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="iframe">
        iframe.html
    </div>
    </form>
</body>
</html>

3.iframexxx.html

<html>
<head>
	<meta charset="utf-8">
    <title>iframexxx.html</title>
</head>
<body>
	iframexxx.html滴答滴答嗲嗲
</body>
</html>

4.上结果图

5.再贴下iframe.html中的代码

 $(function() {
            //在iframe中查找父页面元素
            console.log("在iframe中查找父页面元素:$('#default', window.parent.document).html()===");
            console.log($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的方法
            console.log('在iframe中调用父页面中定义的方法');
            parent.getHelloWorld();
            //在iframe中调用父页面中定义的变量
            console.log('在iframe中调用父页面中定义的变量');
            console.log(parent.hello);

            console.log('在iframe中调用父页面中的另一个iframe方法1');
            console.log(window.parent.window.frames['mainFrame']);
            console.log('在iframe中调用父页面中的另一个iframe方法2');
            console.log(window.parent.document.getElementById("mainFrame"));
        });

欢迎分享本文，转载请保留出处：前端ABC » 多个iframe间的js操作（含父子、兄弟操作）

多个iframe间的js操作（含父子、兄弟操作）

相关推荐

发表评论 0