萬盛學電腦網 >> 腳本專題 >> javascript >> JS父頁面與子頁面相互傳值方法
JS父頁面與子頁面相互傳值方法
這篇文章主要介紹了使用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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved