`
chinrui
  • 浏览: 97624 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

javascript使用window.opener在两个页面之间传递值

阅读更多
javascript使用window.opener在两个页面之间传递值

1、使用第一个页面打开第二个页面,通过第二个页面传递值给第一个页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	</head>
	<body>
		<form name="form1" action="test.htm" method="post">
			客户ID:<input type="text" name="cid" value="" id="cid"><br/>
			客户名称:<input type="text" name="cname" value="" id="cname"><br/>
			<input type="button" name="ok" value="请选择客户" onclick="openWin();">
		</form>
	</body>
	
	<script type="text/javascript">
		/*
		 * window.open(sURL,sName,sFeatrues);
		 * sURL:要打开文件的URL地址
		 * sName:指定打开窗口的名字:_self当前窗口 _blank:在新窗口打开
		 * sFeatures:装饰
		 */
		function openWin() {
			window.open("msg.htm","_blank","height=200,width=200,status=yes,toolbar=no,menubar=no");
		}
		
		function setValue(cid,cname) {
			document.getElementById("cid").value = cid;
			document.getElementById("cname").value = cname;
		}
	</script>
</html>

2、第二个页面获取第一个页面的对象,并调用第一个页面的方法,将第一个页面所需要的值传递给第一个页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
	<script type="text/javascript">
		function viewData(cid ,cname) {
			//获取通过showModalDialog传过来的window对象
			var sdata = window.opener;
			
			//设置第一个页面的属性值
//			sdata.document.getElementById("cid").value = cid;
//			sdata.document.getElementById("cname").value = cname;
			
			sdata.setValue(cid,cname);			
			//关闭Dialog窗口
			window.close();
		}
	</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>操作</td>
				<td>客户ID</td>
				<td>客户名称</td>
			</tr>
			<tr>
				<td><button onclick="viewData('001','深圳华为')">选择</button></td>
				<td>001</td>
				<td>深圳华为</td>
			</tr>
			<tr>
				<td><button onclick="viewData('002','用友软件')">选择</button></td>
				<td>002</td>
				<td>用友软件</td>
			</tr>
		</table>
	</body>
</html>

分享到:
评论

相关推荐

    字符串 window.open() window.opener window.name window对象等的总结

    这可以用来在页面间传递数据,特别是在`window.open()`的场景下。 ```javascript // 设置窗口名字 window.name = 'myUniqueName'; // 之后可以通过这个名字获取到该窗口 var newWindow = window.open('', '...

    opener实例页面之间传递参数

    本篇文章将深入探讨如何在JSP页面上使用JavaScript的`opener`属性来传递和接收参数。 首先,我们要理解`opener`的概念。`window.opener`是一个特殊的属性,它引用了打开当前窗口的窗口对象。如果一个窗口是另一个...

    用window.open,opener实现网页间通信

    利用这两个API,我们可以实现在两个网页之间直接进行数据传递。 #### 三、前提条件 为了确保跨窗口的数据传输安全,浏览器实施了同源策略。这意味着只有当两个网页来自相同的协议(http 或 https)、域名和端口时...

    javascript 两个页面之间传值

    2. **存储在`window.name`中**:`window.name`属性在页面关闭后仍会保持,所以可以在`opener.html`中设置它: ```javascript window.open("", "newWindow").name = JSON.stringify({data: "要传递的数据"}); ```...

    window.showModalDialog以及window.open用法简介

    `window.showModalDialog`和`window.open`是JavaScript中用于实现这一目标的两个关键函数。它们都可以创建新窗口,但有着不同的特性和使用场景。 首先,`window.open()`是一个广泛使用的函数,它可以在浏览器中打开...

    JavaScript 编写日历

    本项目中,我们看到一个使用纯JavaScript编写的日历控件,它不仅能够展示日期,还实现了两个不同页面之间的值传递。这通常涉及到跨窗口通信,其中“window.opener”属性扮演了关键角色。 首先,让我们深入了解一下...

    子窗口向父窗口传递值

    总结一下,子窗口向父窗口传递值主要依赖于`window.parent`和`window.opener`这两个属性,它们允许子窗口访问并操作父窗口的DOM元素。通过结合查询字符串传递初始数据和JavaScript操作,可以实现复杂的跨窗口通信。...

    javascript父子页面传参

    - `window.name`属性是唯一不会在页面刷新时丢失的属性,可以用于在父子页面间传递数据,但这种方法的局限性在于只能存储字符串。 在提供的DEMO文件中,可能包含了以上一种或多种技术的示例。例如,a.html可能是父...

    parent和opener的区别

    在前端开发中,`parent`和`opener`是两个非常重要的概念,尤其是在处理浏览器窗口间通信的时候。这两个属性都属于`Window`对象,用于访问与当前窗口相关的其他窗口。 #### `parent` `parent`属性指的是当前窗口的...

    接收弹出页面的回传值

    这里使用了`postMessage`方法来跨窗口通信,它允许两个具有共同祖先的窗口之间安全地传递消息。`valueToReturn`是你要传递的值,`'*'`表示允许任何源接收消息。 在A页面,我们需要监听`message`事件来接收到的消息...

    js弹出窗口返回值

    - 使用`window.opener`时,需要注意同源策略的限制,即只有当两个窗口来自相同的协议、域名和端口时,才能通过`window.opener`访问。 - 当涉及到复杂的多窗口交互时,建议使用更现代的技术如`PostMessage API`来进行...

    javascript网页对话框.pdf

    对于`window.open`打开的窗口,可以使用`window.opener`来引用父窗口,比如刷新父窗口可以使用`window.opener.location.reload();` 需要注意的是,`showModalDialog`和`showModelessDialog`在现代浏览器中的支持...

    javascript 父窗口、子窗口传值问题

    本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先,我们需要理解“父窗口”和“子窗口”的概念。在浏览器环境中,一个窗口可以打开另一个窗口,前者称为父窗口,后者称为子窗口。例如,一...

    window.parent与window.openner区别介绍

    在JavaScript中,`window.parent` 和 `window.opener` 是两个不同的对象,它们分别用于处理不同类型的窗口间通信。理解这两个对象的区别对于开发涉及多窗口交互的Web应用至关重要。 首先,`window.parent` 主要应用...

    javascript页面之间传值

    第一种方法是通过`window.open()`函数创建子窗口,并利用`window.opener`属性在父窗口和子窗口之间传递值。`window.open()`可以打开一个新的浏览器窗口或标签页,其返回值是一个窗口对象,我们可以用这个对象来访问...

    页面跳转js获取传递的参数

    在Web开发过程中,页面间的跳转及参数传递是极为常见的需求之一。本文将详细介绍几种通过JavaScript实现页面跳转并获取传递参数的方法。 #### 方法一:使用`window.location.href` ```javascript // 通过修改当前...

    window.open的页面如何刷新(父页面)上层页面

    标题中的问题 "window.open的页面如何刷新(父页面)上层页面" 指的是如何在使用 `window.open` 创建的新窗口中执行 JavaScript 代码以刷新其父窗口。这个问题的解决方案已经在描述中给出,主要涉及以下 JavaScript ...

    js模式化窗口问题![window.dialogArguments]

    在IE中,可以通过`window.dialogArguments`访问父窗口,而在其他浏览器中,如Firefox,可以尝试使用`window.opener.document.getElementById()`来访问并修改父窗口的元素值。不过需要注意,`window.opener.document`...

    js中opener与parent的区别详细解析.docx

    下面通过两个简单的例子来演示如何使用`opener`和`parent`。 ##### 示例1: 使用`opener` 假设页面A通过`window.open()`打开页面B。 - **页面A (aa.html):** ```html &lt;!DOCTYPE html&gt; &lt;html xmlns="http://www....

    js中opener与parent的区别详细解析

    在JavaScript中,window.opener和window.parent这两个对象是用于在不同的窗口或框架之间进行交互的重要属性。它们各自代表了不同的概念和使用场景,下面将详细阐述它们的区别及用法。 ### window.opener window....

Global site tag (gtag.js) - Google Analytics