使用javascript进行页面间传值的问题

最新推荐文章于 2023-03-31 10:44:16 发布

原创最新推荐文章于 2023-03-31 10:44:16 发布 · 4.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #input #button #html #function

.NET 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种在不同浏览器窗口间传递数据的方法，利用JavaScript实现了从子窗口向父窗口回传信息的过程，解决了多页面间的数据交互问题。

最近遇到一个问题,在一个项目中需要输入企业的名称,以便到数据库中找到该企业以便进行相关操作,如果企业名称输入不规范,比如数据库中有多个名为家乐福的商场,包括蜀山区家乐福,包河区家乐福,而用户不能提供准确的信息来查找,因此需要将类似的项目列出来让用户选择,如使用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">

<body>

<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">

<head>

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>

</head>

<body>

<button onclick="testme();">点击这里设置parent.htm中的值</button>

</body>

</html>

方法二:同样新建两个html文件parent.htm和child.

parent.htm

<head>

<title>parent</title>

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');"/>

</body>

</html>

child.htm

<head>

<title>child</title>

<!--

function Button1_onclick() {

var value = document.getElementById("tt").value;

parent.opener.inputtext(value);

window.close();

}

// -->