使用javascript进行页面间传值的问题
2007-12-09 20:08
627 查看
最近遇到一个问题,在一个项目中需要输入企业的名称,以便到数据库中找到该企业以便进行相关操作,如果企业名称输入不规范,比如数据库中有多个名为家乐福的商场,包括蜀山区家乐福,包河区家乐福,而用户不能提供准确的信息来查找,因此需要将类似的项目列出来让用户选择,如使用DropDownList下拉列表来实现,数据超过20则无法继续,而在当前页查询又会造成页面不美观,所以需要到另一个页面中查询,查询好后返回到该页面.这就涉及到两个页面间传值的问题,经过查找资料,发现有两种javascript的方法可以解决这个问题.
方法一:
新建两个html文件分别命名为parent.htm和child.htm,下面将在parent.htm中打开child并设置parent中的值
parent.htm
<!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">
<body>
<input id="hidden_Input" type="text" />
<a href="child.htm" target="_blank">Popup Child.htm</a>
</body>
</html>
child.htm
<!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>
<script type="text/javascript">...
function testme()
...{
var parent = window.parent.opener;
var hiddenInput = parent.document.getElementById('hidden_Input');
if(hiddenInput)
...{
hiddenInput.value = 'show me the money, hahaha';
alert('close this window and see what happens on parent.htm~');
window.close();
}
}
</script>
<title></title>
</head>
<body>
<button onclick="testme();">点击这里设置parent.htm中的值</button>
</body>
</html>
方法二:同样新建两个html文件parent.htm和child.
parent.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>parent</title>
<script type="text/javascript">...
function inputtext(value)
...{
document.getElementById("tt").value=value;
document.getElementById("tt1").focus();
}
</script>
</head>
<body>
点击输入框设置值<input id="tt" type="text" onfocus="javascript:window.open('child.htm','_blank','scrollbars=yes,status=no,top=20,left=20,width=450,height=211');"/>
<input id="tt1" type="text" />
</body>
</html>
child.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>child</title>
<script language="javascript" type="text/javascript">...
<!--
function Button1_onclick() ...{
var value = document.getElementById("tt").value;
parent.opener.inputtext(value);
window.close();
}
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="tt" type="text"/><input id="Button1" type="button"
value="button" language="javascript" onclick="return Button1_onclick()" />
</div>
</form>
</body>
</html>
在parent.htm中点击第一个input控件就会弹出child.htm输入完成后自动关闭页面给parent中的input控件赋值,并将焦点移到下一个控件
方法一:
新建两个html文件分别命名为parent.htm和child.htm,下面将在parent.htm中打开child并设置parent中的值
parent.htm
<!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">
<body>
<input id="hidden_Input" type="text" />
<a href="child.htm" target="_blank">Popup Child.htm</a>
</body>
</html>
child.htm
<!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>
<script type="text/javascript">...
function testme()
...{
var parent = window.parent.opener;
var hiddenInput = parent.document.getElementById('hidden_Input');
if(hiddenInput)
...{
hiddenInput.value = 'show me the money, hahaha';
alert('close this window and see what happens on parent.htm~');
window.close();
}
}
</script>
<title></title>
</head>
<body>
<button onclick="testme();">点击这里设置parent.htm中的值</button>
</body>
</html>
方法二:同样新建两个html文件parent.htm和child.
parent.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>parent</title>
<script type="text/javascript">...
function inputtext(value)
...{
document.getElementById("tt").value=value;
document.getElementById("tt1").focus();
}
</script>
</head>
<body>
点击输入框设置值<input id="tt" type="text" onfocus="javascript:window.open('child.htm','_blank','scrollbars=yes,status=no,top=20,left=20,width=450,height=211');"/>
<input id="tt1" type="text" />
</body>
</html>
child.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>child</title>
<script language="javascript" type="text/javascript">...
<!--
function Button1_onclick() ...{
var value = document.getElementById("tt").value;
parent.opener.inputtext(value);
window.close();
}
// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="tt" type="text"/><input id="Button1" type="button"
value="button" language="javascript" onclick="return Button1_onclick()" />
</div>
</form>
</body>
</html>
在parent.htm中点击第一个input控件就会弹出child.htm输入完成后自动关闭页面给parent中的input控件赋值,并将焦点移到下一个控件
相关文章推荐
- 使用plist进行页面间传值
- 采用母板页的页面使用JavaScript问题
- easyui框架jsp父页面使用iframe标签嵌套子页面传值并加载data-grid数据问题
- JavaScript使用Window Location进行页面跳转
- 使用JavaScript在页面中进行跳转
- 使用JAVASCRIPT进行全屏显示页面,就像触摸屏显示效果
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 使用 Chrome 开发者工具进行 JavaScript 问题定位与调试
- 解决“使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错”的问题
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- 使用loadrunner进行性能测试(三)--页面重定向问题
- 如何处理“使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错”的问题
- 在后端是PHP程序的情况下,保持前端Javascript和PHP之间传值的统一编码可以使用以下函数进行处理:
- javascript进行页面间传值(父调用子)
- JavaScript查询字符串页面传值的问题小结
- 使用Server.Transfer进行页面间传值
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- 使用PHP header进行页面跳转出现的问题解疑
- Storyboard使用TableView进行页面跳转传值
- Struts2使用命名空间后JSP页面无法加载javascript脚本的问题