您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
JS父页面与子页面相互传值方法
作者：佚名 责任编辑：admin 更新时间：2022-06-22
这篇文章主要介绍了使用JS在父页面和子页面间相互传值方法,子页面可以是window.open弹出的,也可以是iframe框架中的页面,需要的朋友可以参考下
一、子页面是父页面通过window.open弹出的情况 子页面要向父页面传值，只要在document前面加window.opener即可。 如： 1.父页面代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档title> head> <script language="javascript"> function tanchu() { window.open("Untitled-5.html"); } script> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="submit" name="button" id="button" value="提交" onclick="tanchu()" /> label> <label> <input type="text" name="textfield" id="textfield" /> label> form> </body> </html> 2.子页面代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档title> head> <script language="javascript"> function aaa() { window.opener.document.getElementByIdx('textfield').value='123123123'; } script> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="submit" name="button" id="button" value="提交" onclick="aaa()" /> label> form> </body> </html> 二、子页面是iframe框架中的页面情况 子页面要向父页面传值，只要在document前面加parent即可。 1.父页面代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档title> head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="textfield" id="textfield" /> label> <iframe id="myiframe" src="Untitled-3.html">iframe> form> </body> </html> 2.子页面代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档title> head> <script language="javascript"> function aa() { var a=parent.document.getElementByIdx('textfield').value; alert(a); } script> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="submit" name="button" id="button" value="提交" onClick="aa()" /> label> form> </body> </html>- 上一个程序编程： 使用iframe window的scroll方法控制iframe页面滚动
- 下一个程序编程： 7个JS基础知识总结
