js弹出窗口返回值的简单实例


Posted in Javascript onMay 28, 2016

a.html:

<form name="form1" method="post" action="">

<a href="javascript:void(null)" class="add" onClick="open('b.html','','resizable=1,scrollbars=1,status=no,toolbar=no,menu=no,width=500,height=400,left=150,top=50')">增加</a>

<input type="text" name="text1">

</form>

b.html:

<script language="javascript" type="text/javascript">

function returnValue()

{

window.opener.document.all.text1.value=document.getElementById("returnText").value;

window.close();

}

</script>

  <input type="button" name="Submit" value="提交" onclick="returnValue();">

  <input name="returnText" type="text" id="returnText">

</p>

补充:window.opener 的用法

window.opener 的用法在一般的用法中,只是用来解决关闭窗口时不提示弹出窗口, 而对它更深层的了解一般比较少。其 实 window.opener是指调用window.open方法的窗口。

在工作中主要是用来解决部分提交的。这种跨页操作对工作是非常有帮助的。

如果你在主窗口打开了一个页面,并且希望主窗口刷新就用这个,打开页面的window.opener就相当于

主窗口的window。

主窗口的刷新你可以用

window.opener.location.reload();

如果你用虚拟的目录:如struts的*.do会提示你重试

你可以改成这样 window.opener.yourformname.submit()

就好了

2〉

在应用中有这样一个情况,

在A窗口中打开B窗口,在B窗口中操作完以后关闭B窗口,同时自动刷新A窗口

function closeWin(){

hasClosed = true;

window.opener.location="javascript:reloadPage();";

window.close();

}

function window.onbeforeunload(){

if(!hasClosed){

window.opener.location="javascript:reloadPage();";

}

}

</script>

上面的代码在关闭B窗口的时候会提示错误,说缺少Object,正确的代码如下:

function closeWin(){

hasClosed = true;

window.opener.location="javascript:reloadPage();";

window.opener=null;

window.close();

}

function window.onbeforeunload(){

if(!hasClosed){//如果已经执行了closeWin方法,则不执行本方法

window.opener.location="javascript:reloadPage();";

}

}

</script>

reloadPage方法如下:

function reloadPage() {

history.go(0);

document.execCommand("refresh")

document.location = document.location;

document.location.reload();

}

PS:由于需要支持正常关闭和强制关闭窗口时能捕捉到事件,用了全局变量hasClosed

==============================================

补充,在父窗口是frame的时候在刷新父窗口的时候会出现问题:

The page cannot be refreshed without resending the information.

后修改如下:

window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;

不需要执行自带的reload()方法,注意,不要再画蛇添足加上这一句:

window.opener.parent.document.frames.item('mainFrame').location.reload();

========================================================================================

最后,为了同时支持刷新普通父窗口和frame父窗口,代码如下:

function closeWin() {

hasClosed = true;

<%if(null != frame){%>

window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;

<%}else{%>

window.opener.location = "javascript:reloadPage();";

<%}%>

//window.opener.top.mainFrame.location="javascript:reloadPage();";

//self.opener.frames.mainFrame.location.reload(true);

window.opener = null;

window.close();

}

function window.onbeforeunload(){

if (!hasClosed) {

<%if(null != frame){%>

window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;

<%}else{%>

window.opener.location = "javascript:reloadPage();";

<%}%>

window.opener = null;

}

}

window.opener 的用法

window.opener 返回的是创建当前窗口的那个窗口的引用,比如点击了a.htm上的一个链接而打开了b.htm,然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中,就可以写为:

window.opener.document.getElementById("name").value = "输入的数据";

对于javascript中的window.opener没有很好的理解。

为什么框架中不能使用,弹出窗口的父窗口不能在框架里面的某个页面呢?那怎样通过弹出窗口操作框架中的父窗口呢?

opener.parent.frames['frameName'].document.all.input1.value 试试这个:)

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent

window.opener引用的是window.open打开的页面的父页面。

window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面.

可以这样

window.frames[0].document.getElementById('xx');

可以这样

window.frames[0].document.body.innerHTML;

frm = window.parent.window.frames['uploadFrame'];

frmDocument = frm.document;

frm.sb(3); //sb 是uploadFrame页面里的一个函数

对于firefox

如果你遇到报错:parent.document.frames has no properties

换为如下代码就可以了,这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实 frames 集合并不是挂在 document 而是挂在 window 对象下.

注意这样修改frame里的页面有限制,就是必须是同域下的,否则无法访问

如果是同一域下,但是子域名不同,那么涉及到的js,html文件都加上一句。

document.domain = xxx.com [这里填写你的域名]document.getElementById('iframeid').contentWindow.document.getElementById('someelementid');

问:

在父窗口window.open()一个子窗口。并定义一个变量i。

在子窗口输入一个值j然后window.opener.i=j;

这样能传过去。但我在子窗口最后加了个window.close();就无法传值了。

请问是否有办法解决这个问题。使我传递值之后再关闭子窗口。

代码如下:

父窗口:parent.jsp

<script>

var i;

window.open('<%=contextPath%>/usermanage/newscontrol/cd.jsp);

</script>

<input type="button" onclick="alert(i)">

子窗口:cd.jsp

<script>

function subm(){

window.opener.i=5;

window.close();

}

</script>

<input type="button" onclick="subm()">

最佳答案

你可以在父窗口放一个

<input id="fromChild" type="hidden" />

<input type="button"

onclick="alert(document.getElementById('fromChild').value)">

在子窗口中:

function subm(){

window.opener.document.getElementById('fromChild').value=5;

window.close();

}

这样既可

<head>

<script language=javascript>
function windowclose()

{ window.opener=null;

window.close();

}

</script>

</head>

<body>

<input id="Button1" type="button" value="button" onclick="windowclose()" />
</body>

以上这篇js弹出窗口返回值的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
Nov 15 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
详解JS数值Number类型
Feb 07 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 Javascript
JS获取子窗口中返回的数据实现方法
May 28 #Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 #Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 #Javascript
全面解析多种Bootstrap图片轮播效果
May 27 #Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 #Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 #Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
You might like
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php绘制一个矩形的方法
2015/01/24 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
2020/01/23 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
如何快速上手Vuex
2017/02/14 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
Django实现文件上传下载功能
2019/10/06 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
GMP办公室主任岗位职责
2014/03/14 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书