1.iframe 父子窗口之间传递值和方法调用
iframe之间可以通过javascript来实现传递值和方法,直接上代码
parent.htm
<!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> <title>iframe之间传值与方法调用</title> <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script> <style type="text/css"> body{ font-size:9pt; } </style> <script type="text/javascript"> function getSonValue() { var sontxtName = window.frames["sonframe"].document.getElementById("txtSonName"); var parentName = document.getElementById("txtName"); parentName.value = sontxtName.value; } function parentAlert() { alert("我来自父页面！"); } function getSonAlert() { return window.frames["sonframe"].sonAlert(); } function getSonValueJquery() { $("#txtName").val($("#txtSonName", window.frames["sonframe"].document).val()); } </script> </head> <body> <fieldset> <legend>调用子页面值</legend> <input type="button" value="点我" onclick="getSonValue()" /> <input type="button" value="点我(Jquery)" onclick="getSonValueJquery()" /> <input type="text" id="txtName" name="txtName"/> </fieldset> <fieldset> <legend>调用子页面方法</legend> <input type="button" value="点我" onclick="getSonAlert()" /> </fieldset> <fieldset> <legend>子页面</legend> <iframe name="sonframe" id="sonframe" src="Son.htm" height="500px" width="500px" frameborder=0></iframe> </fieldset> </body> </html>
son.htm
<!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> <title></title> <script src="JavaScript/JQuery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function getParentValue() { var parentName = window.parent.document.getElementById("txtName"); var sonName = document.getElementById("txtSonName"); sonName.value = parentName.value; } function getParentJqueryValue() { $("#txtSonName").val($("#txtName", window.parent.document).val()); } function sonAlert() { alert("我来自子页面！"); } function getParentAlert() { return window.parent.parentAlert(); } </script> </head> <body> <fieldset> <legend>调用父页面值</legend> <input type="button" value="点我" onclick="getParentValue()" /> <input type="button" value="点我(Jquery)" onclick="getParentJqueryValue()" /> <input type="text" id="txtSonName" name="txtSonName"/> </fieldset> <fieldset> <legend>调用父页面方法</legend> <input type="button" value="点我" onclick="getParentAlert()" /> </fieldset> </body> </html>
