【JS】:JS中父页面与子页面传值

布满荆棘的人生 2022-06-18 11:43 302阅读 0赞

**一、子页面是父页面通过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="提交"  
            οnclick="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="提交"  
            οnclick="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>