父子窗口传值

最新推荐文章于 2023-04-29 09:57:37 发布

飞火龙在天

最新推荐文章于 2023-04-29 09:57:37 发布

阅读量1.4k

点赞数

文章标签：父子窗口传值

本文链接：https://blog.csdn.net/qq_23145857/article/details/52069110

版权

哈哈哈，简单的讲了一下课：

***壹***

父子窗口传值，用window.open()

父窗口：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父子窗口传值</title>
<script type="text/javascript">

function chuan(){

var w= window.open ('D:/JAVA/dw/js/jsweb/js第五讲父子窗口传值/zi.html','_blank','width=600,height=400,top=100,left=500,menubar=no,toolbar=nostatus=no,scrollbars=yes');

}

</script>
</head>

<body>
<form>
<table>
<tr><td>用户名：</td><td><input type="text" id="user" name="user"> </td></tr>
<tr><td>密   码：</td><td><input type="password" id="password" name="password"></td></tr>
<tr><td><input type="button" value="点我" onClick="chuan();"> </td><td><input type='reset' value="重置" > </td></tr>
</table>
</form>
</body>

</html>

子窗口：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子窗口及子窗口向父传值</title>
<script type="text/javascript">
window.onload=function (){//网页打开就加载函数
huoqu()
};
function huoqu(){
//window.opener.document.getElementById("user").value代表父窗口用户名输入框里的值
//document.getElementById("user2").value代表子窗口用户名输入框里的值
//等号左边代表参数，右边代表值
document.getElementById("user2").value=window.opener.document.getElementById("user").value;
document.getElementById("password2").value=window.opener.document.getElementById("password").value;

}
function rrr(){

var user2=document.getElementById("user2").value;
var password2=document.getElementById("password2").value;
window.opener.document.getElementById("user").value=user2;
window.opener.document.getElementById("password").value=password2;
window.close();

}
</script>
</head>

<body>

用户名为<input type="text" id="user2" name="user2"><br/>
密码为<input type="text" id="password2" name="password2">

<input type="button" value="返回" οnclick="rrr();">

</body>
</html>

***贰***

用模态窗口window.showModalDialog()：

父页：motai.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模态窗口传值</title>
<script type="text/javascript">
function xx(){
var name=document.getElementById("user").value;
var password=document.getElementById("password").value;
var w=window.showModalDialog("D:/JAVA/dw/js/jsweb/js第六讲模态窗口传值/zi.html",name+"#"+password); //模态窗口括号里逗号前面是子窗口页面或url，逗号后面是传的参数，参数与参数之间用“#”隔开。

if (w != 0) { //从子窗口返回的值不为0即有值时
var aaa=w.split("#"); //拆分返回值
document.getElementById("user").value=aaa[0];//aaa[0]第一个参数
document.getElementById("password").value=aaa[1]; //aaa[1]第二个参数
}
}

</script>

</head>

<body>
<table>
<tr><td>用户名</td><td><input type="text" id="user"></td></tr>
<tr><td>密   码</td><td><input type="text" id="password"></td></tr>
<tr><td><input type="button" value="点我" οnclick="xx();"></td></tr>
</table>

</body>
</html>

子页：zi.html

function aa(){
var b=zhi.split("#");//分拆传过来的参数
document.getElementById("user2").value=b[0];
document.getElementById("password2").value=b[1];
}

function qqq(){
var name=document.getElementById("user2").value;
var mima=document.getElementById("password2").value;
window.returnValue=name+"#"+mima;//window.returnvalue表示的是返回到父窗口的值
close();
}
</script>

</head>

<body οnlοad="aa();">//body里面的onload表示网页打开时就加载

<table>
<tr><td>用户名</td><td><input type="text" id="user2"></td></tr>
<tr><td>密   码</td><td><input type="text" id="password2"></td></tr>
<tr><td><input type="button" value="点我子向父传" οnclick="qqq()"></td></tr>
</table>
</body>
</html>

飞火龙在天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子窗口传值

哈哈哈，简单的讲了一下课：父窗口：父子窗口传值 function chuan(){var w=window.open('D:/JAVA/dw/js/jsweb/js第五讲父子窗口传值/zi.html','_blank','width=600,height=400,top=100,left=500,menubar=no,toolbar=nostatus=
复制链接

扫一扫