Javascript 两个窗体之间传值实现代码

如我们新建窗体FatherPage.htm:
XML-Code:


代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素:
XML-Code:


代码如下:

<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />

其实在打开子窗体的同时,我们也可以对子窗体的元素进行赋值,因为window.open函数同样会返回一个子窗体的引用,因此FatherPage.htm可以修改为:
XML-Code:


代码如下:

<script type="text/javascript">
function OpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

通过判断子窗体的引用是否为空,我们还可以控制使其只能打开一个子窗体:
XML-Code:


代码如下:

<script type="text/javascript">
var child
function OpenChildWindow()
{
if(!child)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

光这样还不够,当关闭子窗体时还必须对父窗体的child变量进行清空,否则打开子窗体后再关闭就无法再重新打开了:
XML-Code:


代码如下:

<body onunload="Unload()">
<script type="text/javascript">
function SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
function Unload()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>

(0)

相关推荐

  • JavaScript 弹出窗体点击按钮返回选择数据的实现

    首先是父页面的代码: 复制代码 代码如下: <head runat="server"> <title>无标题页</title> <%-- <script type="text/javascript"> function openDia() { var returned = window.showModalDialog("Default4.aspx?" + (new Date()), windo

  • 鼠标拖拽移动子窗体的JS实现

    1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div>    <div class="modal-window">        <div class="head">            <center>点住着块区域可以改

  • Javascript showModalDialog两个窗体之间传值

    Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures]) 参数说明: sURL--必选参数,类型:字符串.用来指定对话框要显示的文档的URL. vArguments--可选参数,类型

  • javascript 子窗体父窗体相互传值方法

    我们精简使用版本,一般情况好多cms都有一些这样的函数.dedecms中的选择相关文章也是用的这样的函数.下面给出具体的代码.父页面核心代码: 复制代码 代码如下: <script>function SelectArcListA(fname){ var posLeft = 10; var posTop = 10; window.open("content_select_list.asp?f="+fname+"&k="+form1.keyword.

  • javascript 通过封装div方式弹出div窗体

    图1(弹出一个div) 图2(弹出多个)构造函数: 复制代码 代码如下: var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度,用来定位在

  • js关闭子窗体刷新父窗体实现方法

    复制代码 代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->使用open方式打开的窗体 //使用地址方式 window.opener.location.href='m_Shedule_Main.aspx'; //使用浏览器刷新功能 window.opener.location.reload(); 使用showModalDialog方法 wi

  • 利用javaScript实现点击输入框弹出窗体选择信息

    在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流! 复制代码 代码如下: <html> <head>  <title>点击弹出DIV选择信息</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description&

  • javascript用DIV模拟弹出窗口_窗体滚动跟随

    可滚动跟随弹出框效果代码--我们 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = document.documentElement.clientHeight; var width = document.documentElement.clientWidth; return {top:

  • Ext JS动态加载JavaScript创建窗体的方法

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构:  项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等. 2 数据库表结构 可以用下面的SQL在MSSQL中创建表,其中JavaScriptC

  • 父子窗体间传递JSON格式的数据的代码

    如果某个一级评分项包含评分子项,则点击该评分项时,再弹出一个新窗口,新窗体中列出了当前评分项的所有评分子项列表,供用户进行操作.用户操作完成后,点击"确定"按钮,则返回到父窗体,在子窗体中所有的操作结果,同时要带到父窗体中.同时,如果用户再次点击该评分项,则在弹出子窗体的同时,要将上次操作的结果绑定到对应的操作项上. 上面描述的例子,就涉及到了一个父子窗体间的数据传递.如何实现这一数据传递,当然有很多方法.这里只是记录一下在这个例子中我使用的方法.我的方法是在子窗体点击"确定

随机推荐