`
234390216
  • 浏览: 10207237 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A5ee55b9-a463-3d09-9c78-0c0cf33198cd
Oracle基础
浏览量:461548
Ad26f909-6440-35a9-b4e9-9aea825bd38e
springMVC介绍
浏览量:1773273
Ce363057-ae4d-3ee1-bb46-e7b51a722a4b
Mybatis简介
浏览量:1396657
Bdeb91ad-cf8a-3fe9-942a-3710073b4000
Spring整合JMS
浏览量:394320
5cbbde67-7cd5-313c-95c2-4185389601e7
Ehcache简介
浏览量:678812
Cc1c0708-ccc2-3d20-ba47-d40e04440682
Cas简介
浏览量:529774
51592fc3-854c-34f4-9eff-cb82d993ab3a
Spring Securi...
浏览量:1179701
23e1c30e-ef8c-3702-aa3c-e83277ffca91
Spring基础知识
浏览量:464245
4af1c81c-eb9d-365f-b759-07685a32156e
Spring Aop介绍
浏览量:150672
2f926891-9e7a-3ce2-a074-3acb2aaf2584
JAXB简介
浏览量:67335
社区版块
存档分类
最新评论

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

阅读更多

我使用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>
 
0
1
分享到:
评论

相关推荐

    js操作模态窗口及父子窗口间相互传值示例

    主要介绍了js操作模态窗口及父子窗口间相互传值,需要的朋友可以参考下

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

    在JavaScript编程中,父窗口与子窗口之间的通信是一种常见的需求,特别是在构建多...在实际应用中,根据场景和安全性要求选择合适的方法进行父子窗口间的通信。同时,要确保遵循同源策略,因为跨域通信可能会受到限制。

    window.open父子窗口传值问题

    当我们谈论“window.open父子窗口传值问题”,我们指的是在父窗口通过`window.open`创建了一个子窗口,并需要在两者之间进行数据通信的情况。 首先,让我们了解一下`window.open`的基本语法: ```javascript var ...

    动态增删table以及后台传值和弹出窗口父子窗口传值

    弹出窗口父子窗口传值主要指的是在Web应用中打开新窗口或弹出对话框时,两个窗口之间数据的交换。在JavaScript中,可以使用window.open()函数创建新窗口,并通过window对象的属性(如opener或parent)来访问父窗口或...

    ie+FF通用的父子模态对话框相互传值

    总的来说,实现"ie+FF通用的父子模态对话框相互传值"涉及到JavaScript的事件处理、跨窗口通信和CSS的模态设计。理解这些知识点并熟练运用,能帮助开发者创建出更好的交互体验。同时,要时刻关注浏览器的兼容性和最佳...

    JS弹出窗口的各种传值方法.pdf

    总结来说,这个示例展示了JavaScript中使用`window.showModalDialog()`进行父子窗口间通信的方法。通过对话框参数和`window.returnValue`,可以方便地在两个窗口之间传递数据和控制窗口状态。这种方式对于需要在多个...

    JS简单实现父子窗口传值功能示例【未使用iframe框架】

    本文实例讲述了JS简单实现父子窗口传值功能。分享给大家供大家参考,具体如下: 父窗口页面father.html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&...

    在JS中。页面间传值

    在JavaScript(JS)中,页面间传递值是一个常见的需求,特别是在多页面应用中。这个过程涉及到用户在不同的HTML页面之间导航,并确保某些数据能够被安全有效地传输。在本篇文章中,我们将深入探讨如何在A页面打开B...

    iframe父子传值

    然而,当涉及到`iframe`中的父子窗口间通信时,开发者可能会遇到一些挑战。本文将详细介绍如何在`iframe`的父窗体与子窗体之间进行数据传递。 ### 1. 同源策略与跨域限制 首先,我们需要了解浏览器的安全机制——...

    javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例第1/2页

    javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例代码。

    javascript父子页面传参

    总的来说,JavaScript父子页面传参涉及多种技术,根据实际场景选择合适的方法。理解并熟练掌握这些技术对于开发交互丰富的Web应用至关重要。在实际项目中,还应注意安全性问题,避免跨站脚本攻击(XSS)等风险。

    javascript 跨网页传值

    JavaScript跨网页传值是Web开发中的常见需求,它允许用户在不同的HTML页面间传递数据,无需依赖服务器端技术如JSP中的session。本教程将详细讲解如何实现这一功能,主要涉及JavaScript的基础知识以及一些实用技巧。 ...

    Layui实现父子页面之间值传递.zip

    这种传递方式适用于页面间不涉及服务器交互的情况,如果需要服务端参与,可以考虑使用路由参数或者存储在缓存中来传递数据。在实际项目中,需要注意安全性问题,确保数据在传递过程中的安全性。

    iframe的父子窗口之间的对象相互调用基本用法

    使用iframe的时候,可能会涉及到父子窗口之间传值和方法的相互调用,之前一直有些迷糊,也没有着意去弄清楚,这两天要干活,没法子了只好把这都弄明白了。其实非常简单,就那么几个用法,几句代码而已。 子窗口中...

    详解layui弹窗父子窗口之间传参数的方法

    在 layui 弹窗父子窗口之间传参数时,我们可以使用 layer.open() 方法的 success 属性来传递参数。success 属性是一个函数,在打开弹窗成功后执行该函数。我们可以在该函数中传递参数给子窗口。 下面是一个简单的...

    ShowModalDialog父窗体向子窗体传值

    在这种情况下,可能需要使用其他方法,如回调函数或使用`postMessage` API来实现父子窗口之间的安全通信。 总的来说,`showModalDialog`和`showModelessDialog`是JavaScript中用于创建弹出式对话框的两种方式,它们...

    iframe与父页面传值

    在进行父子页面通信时,必须注意安全问题。`postMessage`提供了验证`origin`的能力,以防止恶意页面注入数据。同时,由于浏览器的同源策略,跨域通信需要处理跨域资源共享(CORS)设置。 四、应用场景 - 内容嵌入:...

Global site tag (gtag.js) - Google Analytics