iframe用法小结

最新推荐文章于 2021-07-21 14:22:28 发布

王武顺

最新推荐文章于 2021-07-21 14:22:28 发布

阅读量323

点赞数 1

分类专栏： html与css 文章标签： iframe

本文链接：https://blog.csdn.net/wangwushun/article/details/50679639

版权

html与css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

iframe用法小结

公司后台管理系统一堆iframe,相互操作很频繁，今天小结一下，父页面操作子页面，子页面操作父页面，子页面操作顶层父页面，兄弟页面操作

父页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>iframe父子页面取值</title>
    <script type="text/javascript" language="javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
        function change () {
            alert('父集');

        }
        function callChild () {
/*          myFrame.window.child();
            myFrame.window.document.getElementById('button').style.backgroundColor='red';   */

/*          myFrame.child();
            myFrame.document.getElementById('button').style.backgroundColor='red';*/    

            document.getElementById('frame').contentWindow.child();//操作第一个子页面方法；
            document.getElementById('frame').contentWindow.document.getElementById('button').style.backgroundColor="red";//操作第一个子页面的按钮的颜色；

        }
    </script>
</head>
<body>
<input type=button value="调用child.html中的函数child()" id="inp" onclick="callChild()">
<input type="button" id="inp2" onclick="" value="按钮" />
<iframe name="myFrame" src="b_2.html" id="frame"></iframe>
<iframe name="myFrame2" src="b_3.html" id="frame2" style="margin: 20px;"></iframe>
</body>
</html>

第一个子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>iframe父子页面取值</title>
    <script type="text/javascript" language="javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
        function child () {
            alert('第一个子集');

        }

        function child_parent () {
            alert('b_2_1的父集');

        }

        function callParent () {
            //parent.window.change();
            //parent.window.document.getElementById('inp').style.backgroundColor="blue";
            parent.change();//操作父页面的方法；
            parent.document.getElementById('inp').style.backgroundColor="blue";//操作父页面按钮的颜色；

        }

        //操作兄第iframe
        function brother () {
            parent.document.getElementById('frame2').contentWindow.brotherChange();
            parent.document.getElementById('frame2').contentWindow.document.getElementById('button').style.background="yellowgreen";

        }
    </script>
</head>
<body>
<input id="button" type=button value="调用parent.html中的change()函数" onclick="callParent()">
<input id="button2" type="button" value="兄弟iframe" onclick="brother()" />
<iframe src="b_2_1.html" style="margin: 10px;"></iframe>
</body>
</html>

第二个子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>iframe父子页面取值</title>
    <script type="text/javascript" language="javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
        function child2 () {
            alert('第2个子集');

        }
        function brotherChange () {
            alert('兄弟');

        }
        //操作父页面
        function callParent2 () {
            //parent.window.change();
            //parent.window.document.getElementById('inp').style.backgroundColor="blue";
            parent.change();
            parent.document.getElementById('inp').style.backgroundColor="blue";

        }
    </script>
</head>
<body>
<input id="button" type=button value="调用parent.html中的change()函数" onclick="callParent2()">
</body>
</html>

第一的字页面下的子页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>iframe父子页面取值</title>
    <script type="text/javascript" language="javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script>
    <script type="text/javascript">
        function child_1 () {
            alert('第一个子集的子集');

        }

        function callParent_1 () {
            //parent.window.change();
            //parent.window.document.getElementById('inp').style.backgroundColor="blue";
            parent.child_parent();
            parent.document.getElementById('button').style.height="36px";//改变父集按钮的颜色；
            top.document.getElementById('inp2').style.backgroundColor="#f60";//改变顶层按钮的颜色


        }
    </script>
</head>
<body>
<input id="button" type=button value="调用parent.html中的change()函数" onclick="callParent_1()">
</body>
</html>

王武顺

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe用法小结

iframe用法小结公司后台管理系统一堆iframe,相互操作很频繁，今天小结一下，父页面操作子页面，子页面操作父页面，子页面操作顶层父页面，兄弟页面操作父页面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
复制链接

扫一扫

专栏目录