使用js在父子窗口间进行传值

简介: 我使用js在父子之间进行传值主要是通过在子窗口调用父窗口的方法来实现传值的目的。   parent.html parent.html function openWin() { ...

我使用js在父子之间进行传值主要是通过在子窗口调用父窗口的方法来实现传值的目的。

 

parent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>parent.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		function openWin() {
			var style = "width=300,height=400,location=no,directories=no,toolbar=no,status=no,menubar=no,resizable=no,scrollbars=no";
			window.open("child.html","打开窗口传值",style);		
		}
		
		function setValue(name,hname) {
			document.getElementById("name").value = name;
			document.getElementById("hname").value = hname;
		}
	</script>
  </head>
  
  <body>
    name:<input type="text" id="name"/><a href="#" onclick="openWin()">请选择</a>
    <input type="hidden" name="name" id="hname"/>
  </body>
</html>

 

child.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>child.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		function selectedThis(obj) {
			var name = obj.value;
			var hname = obj.id;
			window.opener.setValue(name,hname);//调用父窗口的方法进行传值
			window.opener = null;
			window.close();
		}
	</script>
  </head>
  
  <body>
    请选择名称:<br/>
    <input type="radio" name="name" id="name1" value="名称1" onclick="selectedThis(this)"/>名称1
    <input type="radio" name="name" id="name2" value="名称2" onclick="selectedThis(this)"/>名称2
    <input type="radio" name="name" id="name3" value="名称3" onclick="selectedThis(this)"/>名称3
    <br/>
    <input type="radio" name="name" id="name4" value="名称4" onclick="selectedThis(this)"/>名称4
    <input type="radio" name="name" id="name5" value="名称5" onclick="selectedThis(this)"/>名称5
    <input type="radio" name="name" id="name6" value="名称6" onclick="selectedThis(this)"/>名称6
    
  </body>
</html>
 
目录
相关文章
|
6月前
|
JavaScript 前端开发 UED
JS:如何获取浏览器窗口尺寸?
JS:如何获取浏览器窗口尺寸?
247 1
|
5月前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
43 5
|
6月前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
5月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
|
6月前
|
JavaScript 前端开发
JavaScript 窗口
JavaScript 窗口
|
6月前
|
JavaScript 前端开发 Java
JavaScript中的传值与传引用
JavaScript中的传值与传引用
37 0
|
6月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
58 1
|
6月前
|
JavaScript 前端开发
js中父子元素如何传值
js中父子元素如何传值
67 0
|
6月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
12月前
|
JavaScript 前端开发
JavaScript打开新窗口的几种方式
JavaScript打开新窗口的几种方式