JS与jQuery实现子窗口获取父窗口元素值的方法


Posted in jQuery onApril 17, 2017

本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考,具体如下:

功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示。

js:

父窗口:

<input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="disabled" />
<input type="button" onclick="window.open('showDetails.html','','toolsbar=no,menubar=no,resizable=yes,scrollbars=yes')" value="查看已有明细" id="showDetail" />

子窗口:

curproject = window.opener.document.getElementById("currentProjectIDForDetail").value;

jQuery:

父窗口:

<input type="text" name="aa" id="aa" />
<input type="button" onclick="window.open('son.html','','toolsbar=no,menubar=no,resizable=yes,scrollbars=yes')" value="send" />

子窗口:

<script>
  $(function () {
    temp=$("#aa",window.opener.document).val();
    $("#bb").html(temp);
  })
</script>
  </head>
  <body>
  <div id="bb"></div>

结果:

JS与jQuery实现子窗口获取父窗口元素值的方法

希望本文所述对大家JavaScript程序设计有所帮助。

jQuery 相关文章推荐
利用jQuery解析获取JSON数据
Apr 08 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 jQuery
jquery插件实现搜索历史
Apr 24 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 #jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
You might like
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
详解Python中的四种队列
2018/05/21 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
python使用thrift教程的方法示例
2019/03/21 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
个人求职简历的自我评价范文
2013/10/09 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
法学毕业生自我鉴定
2013/11/08 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
高三学习决心书
2014/03/11 职场文书
星级党支部申报材料
2014/05/31 职场文书
行政管理专业求职信
2014/07/06 职场文书
涨价通知怎么写
2015/04/23 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题