`
touch_mai
  • 浏览: 40005 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

子窗口中操作父窗口对像(javascript)(转)

阅读更多
在ModalDialog中操作父窗口对象


1、不能使用window.parent

Window.parent是用来在frame中进行操作的,在对话框中不能用来操作父窗口对象



2、正确的做法



调用modaldialog时通过传参数的方式操作

例:

需求

父窗口页面为a.html 子窗口页面为b.html。a.html中有文本框id为test1,在打开的对话框中点击按钮,将a.html的文本框值改为“子窗口值”。

实现

打开对话框时把test1作为参数传给子窗口,在子窗口中获取参数,将参数对象(即a.html中传过来的text对象)的value属性值设置为“子窗口值”

注意:这里只能传id,不能传name



a.html代码如下

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>a.html</title>

</head>

<body>

<input type=text id=test1 value=''>

<input type=button value=" OK " onclick='window.showModalDialog("b.html", test1)'>

</body>

</html>



b.html代码如下



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>b.html</title>

<script language=javascript>

function func1(){

//获取父窗口传过来的参数

var ptextid = window.dialogArguments;

if(ptextid != undefined){

//将父窗口传过来的对象的值改为“子窗口值”

ptextid.value = "子窗口值";

//关闭子窗口

window.close();

}

}

</script>

</head>

<body>

<input type=button value=" OK " onclick=func1()>

</body>

</html>





如果需要操作的父窗口对象比较多,也可以将window或window.document作为参数传给子窗口。

例:

需求

a.html中添加id为“aform”的的form,form中有id为test2的文本框,在b.html中,除了进行上面的操作之外,还要将test2的值改为“子窗口值2”,并将form提交到c.html。

实现1

将a.html中打开对话框的函数改为如下方式:

window.showModalDialog("b.html", window.document);



将b.html中func1()改为如下:



function func1(){

var pdoc = window.dialogArguments;

if(pdoc!=undefined){

pdoc.all.test1.value="子窗口值";

pdoc.all.test2.value="子窗口值2";

pdoc.all.aform.action="c.html";

pdoc.all.aform.submit();

}

}





实现2

因为在子窗口中对父窗口进行的操作比较多,也可以采用execScript的方式实现。



将a.html中打开对话框的函数改为如下方式:

window.showModalDialog("b.html", window);



添加javascript函数如下

function func(){

test1.value="子窗口值";

document.all.test2.value="子窗口值2";

aform.action="c.html";

aform.submit();

}



将b.html中func1()改为如下:



function func1(){

var pwin = window.dialogArguments;

if(pwin!=undefined){

var codeStr = "func();"

pwin.execScript(codeStr,"javascript");

window.close();

}

}


showModalDialog和showModelessDialog使用心得-转载
一、showModalDialog和showModelessDialog有什么不同?
  showModalDialog:被打开后就会始终保持输入焦点。除非对话框被关闭,否则用户无法切换到主窗口。类似alert的运行效果。
  showModelessDialog:被打开后,用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口?
  在被打开的网页里加上<base target="_self">就可以了。这句话一般是放在<html>和<body>之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容?
  在showModalDialog和showModelessDialog里是不能按F5刷新的,又不能弹出菜单。这个只能依靠javascript了,以下是相关代码:

<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>

  将filename.htm替换成网页的名字然后将它放到你打开的网页里,按F5就可以刷新了,注意,这个要配合<base target="_self">使用,不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
  <input type="button" value="关闭" onclick="window.close()">
  也要配合<base target="_self">,不然会打开一个新的IE窗口,然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
  (作者语:本来想用一问一答形式来写的,但是我想不出这个怎么问,所以只好这样了。)
  这个东西比较麻烦,我改了好几次了不是没办法说明白(语文水平越来越差了),只好用个例子说明了。
  例子:
    现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

      一般的传递方式:
        window.showModalDialog("filename.htm",var_name)
        //传递var_name变量
      在showModalDialog(或showModelessDialog)读取和设置时:
        alert(window.dialogArguments)//读取var_name变量
        window.dialogArguments="oyiboy"//设置var_name变量
    这种方式是可以满足的,但是当你想在操作var_name同时再操作第二个变理var_id时呢?就无法再进行操作了。这就是这种传递方式的局限性。
    
      以下是我建议使用的传递方式:
        window.showModalDialog("filename.htm",window)
        //不管要操作什么变量,只直传递主窗口的window对象
      在showModalDialog(或showModelessDialog)读取和设置时:
        alert(window.dialogArguments.var_name)//读取var_name变量
        window.dialogArguments.var_name="oyiboy"//设置var_name变量

        同时我也可以操作var_id变量
        alert(window.dialogArguments.var_id)//读取var_id变量
        window.dialogArguments.var_id="001"//设置var_id变量

        同样还可以对主窗口的任何对象进行操作,如form对象里的元素。
        window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
  因为光说很费劲,我就偷点懒,直接用代码来说了,如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

  以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

  主文件的部份js代码。
  var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px") //打开控制窗口
  var s2=showModelessDialog('about:blank',window,"dialogTop:200px;dialogLeft:300px")  //打开被控制窗口

  控制.htm的部份代码。
  <script>
    //操作位置数据,因为窗口的位置数据是"xxxpx"方式的,所以需要这样的一个特殊操作函数。
function countNumber(A_strNumber,A_strWhatdo)
{
A_strNumber=A_strNumber.replace('px','')
A_strNumber-=0
switch(A_strWhatdo)
{
case "-":A_strNumber-=10;break;
case "+":A_strNumber+=10;break;
}
return A_strNumber + "px"
}
  </script>
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移">
  <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移">
  <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移">

  以上关键部份是:
    窗口命名方式:var s1=showModelessDialog('控制.htm',window,"dialogTop:1px;dialogLeft:1px")
    变量访问方式:window.dialogArguments.s2.dialogTop

  这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能,通过这个原理,在showModelessDialog之间相互控制各自的显示页面,传递变量和数据等。这要看各位的发挥了。
分享到:
评论

相关推荐

    javascript经典特效---子窗口对父窗口的操作.rar

    这个压缩包“javascript经典特效---子窗口对父窗口的操作.rar”显然包含了关于如何使用JavaScript实现这种交互的示例和教程。 首先,我们要了解在JavaScript中操作窗口的基本方法。`window.open()`函数是创建新窗口...

    js(javascript)子窗口和父窗口交互

    ### JavaScript 子窗口与父窗口交互详解 在前端开发中,常常会遇到需要在一个窗口(通常称为父窗口)中打开另一个窗口(子窗口)的情况。这时,如何实现这两个窗口之间的数据交互便成了一个重要的问题。根据题目...

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

    本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先,我们需要理解“父窗口”和“子窗口”的概念。在浏览器环境中,一个窗口可以打开另一个窗口,前者称为父窗口,后者称为子窗口。例如,一...

    子窗口与父窗口刷新

    在这样的场景下,用户在子窗口中操作并提交数据后,可能希望父窗口能即时显示最新的数据,而不是手动刷新整个页面。这种需求可以通过JavaScript的AJAX技术来实现。 首先,我们需要理解AJAX(Asynchronous ...

    JavaScript操作iframe父窗口和子窗口例子

    JavaScript操作iframe父窗口和子窗口是一种常见的Web开发技术,它涉及到网页交互和页面通信。在Web应用程序中,iframe(Inline Frame)常用于嵌入其他网页或者实现页面的局部刷新,而父窗口与子窗口之间的通信则能...

    子窗口传值到父窗口.rar

    这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子窗口传值到父窗口”。在JavaScript中,我们可以利用多种方法...

    子窗口刷新父窗口总结

    在网页开发中,我们常常遇到需要在子窗口完成某些操作后,刷新或更新父窗口数据的情况。这在诸如弹出框进行数据编辑、表单提交等场景中尤为常见。本文档将深入探讨如何在子窗口关闭时刷新父窗口,包括使用`window....

    子窗口通过js操作父窗口中的元素

    在网页开发中,有时我们需要在弹出的子窗口中对父窗口进行操作,例如更新父窗口的数据或控制其显示状态。这种场景下,就需要利用JavaScript(JS)来实现跨窗口的交互。本教程将深入探讨如何在子窗口通过JS操作父窗口...

    HTML 父窗口打开子窗口,并接收子窗口返回的值.zip

    确保在父窗口中设置适当的事件监听器,以便在接收到子窗口的消息时执行相应的操作。 放置这些文件在一个web服务器如nginx的HTML目录下是必要的,因为浏览器的同源策略(Same-Origin Policy)限制了跨域访问,而本地...

    jsp与javascript配合,父窗口与子窗口之间刷新

    5. **父窗口与子窗口的通信**:在JavaScript中,`window.open()`方法用于打开新的浏览器窗口,创建一个子窗口。一旦子窗口被创建,可以通过`window`对象的属性(如`opener`)与父窗口进行通信。例如,子窗口可以修改...

    创建子窗口与子父窗口间通信

    在DHTML手册中,可能包含了如何使用JavaScript操纵DOM元素来实现子窗口与父窗口通信的方法。 3. **IFrame通信:** - 当子窗口是页面内的IFrame时,可以通过`window.parent`访问父窗口的对象,反之亦然,只要同源...

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    JavaScript实现IFrame子窗口调用父窗口的全局变量

    子窗口向父窗口传递值

    在JavaScript编程中,窗口间的通信是一个常见的需求,特别是在构建交互丰富的Web应用时。...在实际开发中,这种技术常用于表单验证、数据预览等场景,确保用户在子窗口中的操作能够影响到父窗口的状态。

    模式窗口操作父窗口

    在Web开发中,利用JavaScript的`window.opener`对象,我们可以轻松地实现在模式窗口中对父窗口进行数据修改或状态更新,进而实现复杂但直观的交互逻辑。这一技术的应用不仅限于上述提到的场景,任何需要在不打断用户...

    HTML中IFrame父窗口与子窗口相互操作

    以下将详细介绍如何在HTML中进行`&lt;iframe&gt;`父窗口与子窗口之间的交互操作。 首先,我们来看一些通用的方法: 1. **获取子窗口的值**: 使用`document.frames`对象(在IE中)或`contentDocument`属性(在非IE浏览...

    showModalDialog使用例子,父窗口向子窗口传递值,子窗口设置父窗口的值,子窗口关闭的时候返回值到父窗口

    在JavaScript中,`showModalDialog`是一个非常有用的函数,它允许我们打开一个新的浏览器窗口或对话框,并与父窗口进行交互。这个功能在开发过程中经常用于创建弹出式表单、确认对话框或者需要用户输入信息的场景。...

    父窗口与子窗口间的调用

    在JavaScript中,可以通过`window.open()`方法来打开一个新的浏览器窗口作为子窗口。这个方法的基本语法如下: ```javascript window.open(url, name, features); ``` - `url`:指定子窗口加载的页面地址,默认为...

    JavaScript实际应用子窗口和父窗口

    这通常发生在用户在子窗口中完成了某些操作(如选择了一个选项或填写了表单),并希望将这些数据返回给父窗口。 ##### 代码示例 ```html &lt;script language="javascript"&gt; function outPut() { var text = ...

    html 模态窗口子窗体调用父窗体的任何函数

    在【标题】"html 模态窗口子窗体调用父窗体的任何函数"中,我们将探讨如何在模态子窗口中实现对父窗口功能的调用。 模态子窗口通常由JavaScript或者jQuery库(如Bootstrap)创建,它们可以通过事件监听或回调函数与...

    javascript提交父窗口

    在探讨“javascript提交父窗口”这一主题时,我们需要理解几个核心概念:JavaScript 是如何与浏览器中的不同窗口进行交互的,以及如何通过 JavaScript 来操作 DOM(文档对象模型)元素,特别是如何触发表单的提交...

Global site tag (gtag.js) - Google Analytics