This time I will bring you the mutual call between iframe parent and child forms (with code). What are the precautions for iframe parent and child forms to call each other. The following is a practical case. Let’s take a look. one time.
Parent form
<html> <head> <title>usually function</title> </head> <body> <iframe src="http://www.baidu.com" ></iframe> <iframe src="myifame.html" id="name_iframe" name="name_iframe"></iframe> <button value="buttonvalue" id="testid">buttonvalue</button> </body> <html> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script> //contentWindow这个属性,相当于获取iframe网页里面的window对象 $(function(){ //父窗体获取子窗体的变量 alert(document.getElementById("name_iframe").contentWindow.vname);//父窗体获取子窗体的方法 document.getElementById("name_iframe").contentWindow.test();//父窗体获取子窗体的内容 alert(document.getElementById("name_iframe").contentWindow.document.body.outerHTML); }); var myname="hb"; function parentFunction(){ alert("parentFunction"); } </script>
Child form
<html> <head> <title>usually function</title> </head> <body> <button onclick="getParentContent()">getParentContent</button> </body> <html> <script type="text/javascript" src="jquery-1.4.4.js"></script> <script> var vname="v_name"; function test(){ alert("function test"); } function getParentContent(){ //获取父窗体的变量 alert(window.parent.myname); //获取父窗体的方法 window.parent.parentFunction(); //获取父窗体的dom节点 alert(parent.document.getElementById("testid").value); } </script>
I believe you have mastered the method after reading the case in this article. How exciting, please pay attention to other related articles on php Chinese website!
Recommended reading:
How iframe triggers parent window element events
JS jquery library implements iframe height and width adaptation (With code)
The above is the detailed content of iframe parent and child forms call each other (code attached). For more information, please follow other related articles on the PHP Chinese website!