iframe用法小结

来源：互联网发布：新浪java面试题编辑：程序博客网时间：2024/05/23 12:00

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