核心提示:a.htm中一段JS function init(){ var drag1=document.getElementById( 'addnew' ); var drag1bar=drag1.getElementsByTagName( 'h3' )[0]; new DragObject({module:drag1,handle:drag1bar}); var addnewPop= new Popup({module:drag1,background:document.ge
a.htm中一段JS
-
function init(){
-
var drag1=document.getElementById('addnew');
-
var drag1bar=drag1.getElementsByTagName('h3')[0];
-
new DragObject({module:drag1,handle:drag1bar});
-
-
var addnewPop=new Popup({module:drag1,background:document.getElementById('transparent')});
-
document.getElementById('addnew_btnclz').onclick=addnewPop.hide;
-
document.getElementById('switch').onclick=addnewPop.show;
-
}
点击<button id=switch></button>运行上面的document.getElementById('switch').onclick=addnewPop.show;
如果想在a.htm里面<iframe>一个b.htm页面.通过点击b.htm页里的<button id=switch></button> 运行a.htm里面的
document.getElementById('switch').onclick=addnewPop.show;
这个传值应该怎样写?
在a.htm中加上
-
function zoom6ugo(myform)
-
{
-
document.getElementById(myform).click();
-
}
b.htm 中
-
<a href="javascript:parent.zoom6ugo('switch')"><div id=swithc></div></a>
子父窗体间传值最重要的是:window.opener.document.getElementById("文本框的ID").value="123456";
或者是:window.opener.document.getElementByName("文本框的名字").value="123456";
1.htm 父窗体代码
-
<script language="javascript" >
-
-
function toUrl()
-
-
{
-
-
window.open("2.htm","_blank");
-
-
}
-
-
function getvalue(a)
-
-
{ Form1.Text1.value=a; }
-
-
</script>
-
-
<form id="form1">
-
-
<input id="text1" width=150px/>
-
-
<input id="button1" name="button1" onclick="toUrl()"/>
-
-
</form>
-
2.htm 子窗体
-
<script language="javascript" >
-
-
function goBack()
-
-
{
-
-
window.opener.getvalue("123");
-
-
window.close();
-
-
}
-
-
</script>
-
-
<form id="form1">
-
-
<input id="button1" name="button1" onclick="goBack()"/>
-
-
</form>
-
子窗体父窗体之间传值通过摸态对话框,试验代码
1.htm 父窗体
-
<script language="javascript" >
-
-
function transVal()
-
-
{
-
-
var newwin=window.showModalDialog("2.htm",window);
-
-
if(newwin!="[object]")
-
-
{ document.getElementById("Text1").value=newwin; }
-
-
}
-
-
</script>
-
-
<form id="form1">
-
-
<input id=text1 width=150px/>
-
-
<input type="button" id=button1 onclick="transVal()"/>
-
-
</form>
-
2.htm 子窗体
-
<script language="javascript" >
-
-
function reVal()
-
-
{var x="123";
-
-
window.returnValue=x;
-
-
window.close();}
-
-
</script>
-
-
<form id="form1">
-
-
<input type="button" id=button1 onclick="reVal()"/>
-
-
</form>
-
两种弹出窗口
(1) 使用window.open()创建的窗口与父窗口通信
可以在子窗口页面中通过window.opener来获取父窗口对象,获取之后子窗口便可以对父窗口执行刷新,传值等操作。
如:
-
window.opener.location.reload(); //子窗口刷新父窗口
-
window.opener.location.href //获取父窗口href
-
window.opener.locaiton.pathname //获取父窗口路径名
-
-
//刷新父页面
-
windowwindow.location.href=window.location.href ; //重新定位父页面
-
window.location.reload;
(2) 模态窗口与父窗口通信
通过使用showModelDialog(),及showModelessDialog()方法创建的子窗口想与父窗口通信时,不能通过window.opener
来获取父窗口对象。要实现通信,必须在创建模态子窗口时向子窗口传入父窗口对象。
实现方式为:
在父窗口中:
-
var newWin=window.showModelDialog(url,window,'');
-
newWin.open();
此时参数window即是父窗口对象
在子窗口中:
需首先获取父窗口对象,然后才能使用父窗口对象。由于父窗口对象是在创建
子窗口时通过传入参数的方式传入的,因此,在子窗口中也只能通过获取窗口参数的方式获取父窗口对象。获取方式如下:
-
var parent=widnow.dialogArguments;
变量parent便是父窗口对象。
例如:
-
-
var parent=window.dialogArguments;
-
parent.document.form1.action="QueryInfor.jsp";
-
parent.submit();
-
-
-
var parent=window.dialogArguments;
-
parent.location.reload();
-
-
-
要实现在模态子窗口中传值到父窗口,需要使用window.returnValue完成
实现方法如下:
在子窗口中:
-
-
var parent=window.dialogArguments;
-
var x=parent.docuement.getElementById("age").value;
-
x=x+1;
-
-
-
window.returnValue=x;
-
在父窗口中:
-
-
var newWin=window.showModelDialog(url,window,'');
-
if(newWin!=null)
-
document.getElementById("age").value=newWin;
-
-
-
在子窗口中向父窗口中传入值似乎没有直接设置父窗口中的值来得明了。直接设置父窗口中元素的值显得要更灵活一些,不过具体使用哪种方法要根据实际情况和已有的实现方式而定,因为如果使用了不切实际的方法不仅降低开发效率,也降低了执行效率,往往也会造成不优雅的实现方式和代码风格。
子窗口设置父窗口的值使用方法如下:
子窗口中:
-
var parent=window.dialogArguments;
-
var x=parent.document.getElementById("age").value;
-
x=x+1;
-
-
parent.document.getElementById("age").value=x;
以上是我在项目中使用javascript解决子窗口问题时,收集及积累的一些方法和资料。我是使用建立模态窗口的方式来实现的(这主要与项目本身有关),不过其实不论是使用window.open()还是使用window.showModelDialog()进行传参等操作时虽然在实现方法上有很大的差别,初次接触会觉得有点乱,但只要理清子窗口与父窗口之间的关系和角色之后,就很好理解了。
分享到:
相关推荐
javascript 子窗体父窗体相互传值方法,一般都是用window.open函数,下面脚本之家给出具体的代码。
通过js实现的子窗体与父窗体之间的值传递
.NET中利用js让子窗体向父页面传值的实现方法.docx
子窗体与父窗体之见互相传值实现使用中很频繁,本文以一个小示例抛砖引玉,希望大家可以举一反三
主要介绍了使用JS在父页面和子页面间相互传值方法,子页面可以是window.open弹出的,也可以是iframe框架中的页面,需要的朋友可以参考下
.NET中利用js让子窗体向父页面传值的实现方法,需要的朋友可以参考一下
众所周知window.open() 函数可以用来打开一个新窗口,那么如何在子窗体中向父窗体传值呢,其实通过window.opener即可获取父窗体的引用。
本篇文章主要是对javascript 实现子父窗体互相传值的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...
代码如下: Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/–>使用open方式打开的窗体 //使用地址方式 window.opener.location.href=’m_Shedule_Main.aspx’;...
js窗体间传值的小demo,这里是一个修改课程的例子,当然通过修改可以做成不过后台的修改,然后一次提交多条记录
在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js:1.在iframe子页面中获取父页面的元素: a>window.parent.document这个是获取父页面...
在js中,我们时常用到用iframe做系统框架,在子页面也,父页面之间的值传递是一个问题,下面是js获取父窗体和子窗体的对象js:
文字滚动消息广告代码、iframe父与子窗体之间的传值、JS-IE6下PNG透明实例、垂直幻灯滚动代码、无间断滚动信息滚动类、隨机选、自动播放下一曲(音量和进度拖曳、
如何传值在2个页面之间 :要求不刷新父页面,并且不能用Querystring传值 Asp.net地址转义(分析)加强版 Web的桌面提醒(Popup) Using the Popup Object Click button only once in asp.net 2.0 Coalesys PanelBar ...