本文介绍了如何使用JavaScript实现不同网页间的交互与值的传递，包括弹出窗口和模式对话框的功能实现，并演示了如何从子窗口向父窗口传递值。
1.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 language="javascript">
//弹出窗口 Js 函数
function openPage(){
window.open('2.html');
}
//弹出模式对话框 Js 函数
function openMode()
{
window.showModalDialog('3.html');
}
</script>
</head>
<body>
<input id="reText" />
<input type="button" value="弹出窗口" οnclick="openPage();" />
<input type="button" value="弹出模式对话框" οnclick="openMode();" />
</body>
</html>
2.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>2页面</title>
<script language="javascript">
//传此值回父窗体 Js 函数
function reText(){
window.opener.document.getElementById('reText').value=document.getElementById('text').value;
}</script>
</head>
<body>
<input type="text" id="text" /><input type="button" value="传此值回父窗体" οnclick="reText();" />
</body>
</html>
3.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>3页面</title>
<script language="javascript">
//传此值回父窗体 Js 函数
function reText(){
window.opener.document.getElementById('reText').value=document.getElementById('text').value;
}
//弹出模式对话框 Js 函数
function openMode()
{
window.showModalDialog('3.html');
}
</script>
</head>
<body>
<input type="text" id="text" /><input type="button" value="传此值回父窗体" οnclick="reText();" />
</body>
</html>
扫一扫
2103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
