JavaScript父窗口获取子窗口信息的实例

我们在使用javascript的途中,我们会经常遇到类似于需要弹出一个窗口来选择你想要的信息的选择窗口,现在大部分的技术都是使用隐藏div的形式,即只有当点击选择的时候显示那一个div,选择好了之后,显示已经选择,这个整个过程都是在同一个页面中进行,我们都 知道只要很好的使用的js就能实现这种, 今天来介绍一个一下,在弹出新的窗口的时候怎么传递参数。 就用实例来说话:

新建两个html文件,father.html,和content.html

father.html的代码:

—————————————————————————————–

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<script language=”javascript”>

function showpage(url) {

window.open(url, “弹出页面”, “width=300,height=200″);

} </script>

</head>

<body>

<center>

<form name=”myform”>

<input type=”button” value=”选择想吃的水果”  onclick=”showpage(‘content.html’)” />

你想吃的水果是:<input type=”text”  name=”result” />

</form>

</center>

</body>

</html>

—————————————————————————————–

content.html的代码:

——————————————————————————————–

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

<head>

<script language=”javascript”>  function returnvalue() {

var fruitName= document.myform.fruits.value;

var fatherDocument = window.opener.document;

fatherDocument.myform.result.value = fruitName;

window.close();

} </script>

</head>

<body>

<form name=”myform”>选择您要的:<select name=”fruits”>

<option value=”苹果”>苹果</option>

<option value=”橘子”>橘子</option>

<option value=”香蕉”>香蕉</option>

<option value=”芒果”>芒果</option>

</select>

<input type=”button” value=”选好啦” onclick=”returnvalue();” />

</form>

</body>

</html>

效果截图:

演示地址:http://www.cangzhang.com/wp-content/uploads/2012/08/father.html

 

共有 2 条评论

Top