`
liqita
  • 浏览: 291887 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

父窗口和子窗口之间的交互 转

阅读更多

转自:http://hi.baidu.com/gfang/blog/item/b991d333a9935f45ad4b5f27.html

 

<一> 在B/S架构的项目中,为了提高项目的易用性,增强系统与用户的交互功能,一般使用弹出页面来为用户提供操作或数据选择帮助信息,比如,用户输入一个编码中某些字符,在弹出页面中显示所有包含这些字符的编码信息,从而帮助用户选择一个精确的编码.
<二> 常使用的弹出页面方法有三种,分别是window.open/showModalDialog/showModelessDialog.其中的 window.open是以一个页面的形式打开,如果页面包含脚本代码,会有限制活动内容的提示,而后两种是以网页对话框的形式显示,脚本可以自由运 行.   

<三> 三种方法均有返回值,其中window.open和showModelessDialog这两种方法返回的是弹出窗口页面的句柄,通过这个句柄取弹出窗口 中控件的值以及为弹出窗口添加控件等动作,而showModalDialog返回值是则是用户在弹出窗口中自定义的任何类型数据,一般是把在弹出窗口中选 择的值封装一个数组返回到父窗口中.
    1>open方法的返回句柄是在窗口打开之时返回 ,可使用此句柄得到静态控件的值.
        父窗口代码:
        var handle=window.open('openPage.html','NEW_PAGE','height=120px,width=500px,top=280px,left=280px,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
        alert( handle.document.getElementById( "SUB_TEXT").value);
        子窗口代码:
        <input type='text' id='SUB_TEXT' value='38938'>
        在弹出窗口被打开之后,会打出子窗口控件SUB_TEXT的值38938

 

    2>showModalDialog()方法的返回值也是在窗口关闭之后返回,不过返回值是弹出窗口中定义的任意类型的数据
        父窗口代码:
        var result= showModalDialog("showModalDialog.html",window,"center:yes;help:no;resizable:no;scroll:no;status:no;dialogWidth:550px;dialogHeight:105px");
        alert(result);
        子窗口代码:
        var result = "abc";
        parent.returnValue = result;
        parent.close();
        在弹出窗口关闭后,会打出弹出窗口中设定的字符串abc.
    3>showModelessDialog()方法的返回值是在窗口弹出时已经返回,所以可以得到的只能是已经被预先赋值的控件的值.
        父窗口代码:
        var result=showModelessDialog("showModallessDialog.html",window,"center:yes;help:no;resizable:no;scroll:no;status:no;dialogWidth:550px;dialogHeight:105px");
        alert(result.document.getElementByIdx_x_x( 'SUB_TEXT' ).value);
        子窗口代码:
        <input type="text" name="SUB_TEXT" value="500122">
        在子窗口弹出后的同时,会打出其控件SUB_TEXT预先赋好的值500112

 

<四> 三种方法均可以使弹出窗口得到父窗口各控件的值.两种打开对话框的方法都是通过在方法参数中传递父窗口的句柄来实现此功能,而open方法则不能在方法参 数中传递父窗口句柄,而是在子窗口的写js代码来取得此弹出窗口依赖的父窗口的句柄,得到父窗口的句柄后,可以取父窗口中的控件值以及设置父窗口中控件 值,open的第二个参数是不能为window的.
    1>使用open弹出的子窗口,不能使用传递参数的办法得到父窗口句柄,可使用window的内建对像opener来取的.
        首先判断opener是否存在,即当前窗口有没有父窗口,有则opener即为父窗口的句柄,然后就可以使用此句柄来操作父窗口中的控件了,之所以使用这种方式,是因为在弹出窗口未关闭的情况下父窗口可能已经关闭了.
        子窗口代码:
        if( window.opener )
        {
            var parentTab = window.opener.document.getElementByIdx_x_x( "tab" );
            parentTab.rows[1].cells[0].innerText=number;
            .......
            window.close();
        }
    2>使用打开网页对话框(模式和非模式)的方法打开子窗口,可以使用第二个参数传递父窗口的句柄到子窗口中.
        父窗口代码:
        var result=showModalDialog("showModalDialog.html",window,......
        或
        var result=showModelessDialog("showModallessDialog.html",window,.....
        子窗口代码:
        var a = window.dialogArguments;
        a.document.forms[0].TEST.value="500000";
        在子窗口中,得到父窗口打开方法的第二个参数window,此变量即是父窗口的句柄,使用此句柄就可以在子窗口中得到父窗口的控件值了
<五> 各方法参数
    1>window.open( url, name, parameters, bReplace )
    此方法弹出页面同普通的网页具有相同的属性,如果默认则弹出一个空白页面,可以查看源代码,可以刷新等.完整的参数列表是
        a> url: 可选项,用字符串表示的加弹出的页面的文件绝对路径或相对路径,文件可以是html/jsp/asp等格式,在j2ee中,url还可以是具有请求作用的 抽象连接或可解析出文件路径或抽象连接的标签,并可能在此连接之向被请求方传递参数名/值,如struts中的action;
        假如此参数没有指定,则会弹出一个默认的空白窗口about:blank.
        此方法加载弹出页面的时间相对于使用网页对话框来说有些慢.

        b> name: 可选项,指定打开的窗口的名字.这个名字可以用于form或a对象的target属性.此名字也可以使用下列通用名称:
        _media    IE6.0在浏览器左边的媒体面板内打开sUrl.
        _blank    在新窗口中打开sUrl.
        _parent   在当前框架的父框架内打开.假如当前框架无父框架,此参数值等同于_self.
        _search   IE5.0在浏览器左边的搜索面板内打开sUrl.
        _selfsUrl 在当前窗口中打开,覆盖当前文档.
        _top      在所有框架之外的最顶层窗口中打开sUrl.假如当前窗口无框架结构,此参数值等同于_self.

        c> 各项参数,可选项,字符串形式,各参数使用","号分隔,主要用来指定窗口装饰样式.只有当新的浏览器窗口被建立时,此参数的设置才会发生作用,下面是参数列表,可

根据实际需要选用相应的参数或设置相应的值.
        其中yes/no也可使用1/0,pixel value为具体的数值,单位象素
        ---------------------------------------------------------------
        参数          | 取值范围    | 说明                           
        ---------------------------------------------------------------
        alwaysLowered | yes/no;1/0 | 指定窗口隐藏在所有窗口之后
        alwaysRaised    | yes/no;1/0 | 指定窗口悬浮在所有窗口之上
        depended         | yes/no;1/0 | 是否和父窗口同时关闭
        directories         | yes/no;1/0 | 是否显示"链接"按钮,默认为不显示
        height             | pixel value | 窗口高度
        width               | pixel value | 窗口宽度,最小值为100
        left                    | pixel value | 窗口左上角相对于桌面的横坐标,单位为像素(px)
        top                    | pixel value | 窗口左上角相对于桌面的纵坐标,单位为像素(px)
        outerHeight      | pixel value | 窗口(包括装饰边框)的像素高度
        outerWidth        | pixel value | 窗口(包括装饰边框)的像素宽度
        hotkeys             | yes/no;1/0 | 在没菜单栏的窗口中设安全退出热键
        innerHeight        | pixel value | 窗口文档的像素高度
        innerWidth        | pixel value | 窗口文档的像素宽度
        location             | yes/no;1/0 | 地址栏是否可见,默认为不可见
        menubar            | yes/no;1/0 | 菜单栏是否可见,默认为不可见
        resizable           | yes/no;1/0 | 窗口大小是否可调整,默认为不可调整
        screenX             | pixel value | 窗口距屏幕左边界的像素长度
        screenY             | pixel value | 窗口距屏幕上边界的像素长度
        scrollbars         | yes/no;1/0 | 是否有滚动栏,默认为无
        titlebar               | yes/no;1/0 | 标题栏是否可见,默认不可见,调用程序非HTML应用程序(HTA)或被信任的对话框时此参数忽略
        toolbar              | yes/no;1/0 | 工具栏是否可见,默认为不可见
        status               | yes/no;1/0 | 状态栏是否可见,默认值不可见
        z-look               | yes/no;1/0 | 窗口被激活后是否浮在其它窗口之上
        channelmode   | yes/no;1/0 | 指定是否将窗口显示为频道模式,默认为no
        fullscreen         | yes/no;1/0 | 指定是否以全屏方式显示窗口,默认值no,此模式会隐藏窗口的标题栏和菜单,可使用ALT+F4快捷键关闭
        ---------------------------------------------------------------

        d> bReplace: 可选项.布尔值(Boolean).false|true
        false新打开的文档覆盖历史列表里的当前文档.
        true文新打开的文档被简单的添加到历史列表的最后.
    2>showModalDialog/showModelessDialog (sURL [, vArguments] [, sFeatures])
    其中sUrl参数是对话框要显示的文档的URL,是必需参数,vArguments和sFeatures不是必需参数
        a>vArguments参数可以向子窗口传递任意类型数据,包括父窗口句柄,子窗口使用window.dialogArguments方法来得到父窗口传递来的数据
        b>sFeatures是对话框样式参数
        ---------------------------------------------------------------
        参数              | 取值范围             | 说明                      
        ---------------------------------------------------------------
        dialogWidth | pixel value            | 对话框宽度
        dialogHeight | pixel value            | 对话框高度
        dialogLeft     | pixel value            | 距离桌面左的距离
        dialogTop     | pixel value            | 离桌面上的距离
        center          | yes/no;1/0            | 窗口是否居中,默认yes,但仍可以指定高度和宽度
        help             | yes/no;1/0            | 是否显示帮助按钮,默认yes
        resizable        | yes/no;1/0             | IE5以上支持,是否可被改变大小,默认no
        status            | yes/no;1/0            | IE5以上支持,是否显示状态栏,默认为yes[Modeless]/no[Modal]
        scroll             | yes/no;1/0;on/off | 指明对话框是否显示滚动条,默认为yes
        ---------------------------------------------------------------
        对话框高度和宽度的值不小于100px,IE4中dialogHeight和dialogWidth默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,最好用px做单位.


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wangting9822/archive/2009/09/10/4536023. aspx

分享到:
评论

相关推荐

    C#中父窗口和子窗口之间实现控件互操作

    在更复杂的应用中,可以考虑使用MVVM模式,通过ViewModel来协调父窗口和子窗口之间的交互,使得代码更加解耦和易于维护。 总的来说,C#中父窗口和子窗口之间的控件互操作主要依赖于对象实例的引用、事件机制、属性...

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

    根据题目提供的信息,本文将详细介绍两种实现父窗口与子窗口交互的方法。 #### 一、通过 `window.open()` 方法实现交互 `window.open()` 是一种常见的创建新窗口的方式。通过这种方式可以灵活地控制新打开窗口的...

    MFC子窗口与父窗口之间消息的传递

    在Microsoft Foundation Classes (MFC)库中,子窗口与父窗口之间的消息传递是应用程序中常见的交互方式。MFC是微软为Windows开发环境提供的一套C++类库,它封装了Windows API,使得开发者可以更方便地创建Windows...

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

    在JavaScript编程中,父窗口与子窗口之间的通信是一种常见的需求,特别是在构建多窗口应用程序或弹出窗口时。本文将深入探讨如何在JavaScript中实现父窗口与子窗口之间的数据传递。 首先,我们需要理解“父窗口”和...

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

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

    Qt 子窗口父窗口切换,窗口间传值

    在Qt编程中,子窗口与父窗口之间的交互是常见的需求,包括窗口间的切换和数据传递。这涉及到Qt的窗口系统和信号与槽机制。本文将深入探讨如何在Qt环境中实现子窗口与父窗口的切换以及如何在窗口之间传递数据。 首先...

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

    综上所述,这个压缩包提供的示例展示了如何在HTML页面中使用JavaScript打开子窗口,以及如何在子窗口与父窗口之间通过`postMessage()`和`message`事件进行数据传递。这在实现多窗口应用程序或者在弹出窗口中进行用户...

    子窗口与父窗口刷新

    在Java Web开发中,"子窗口与父窗口刷新"是一个常见的交互场景,特别是在构建多层级界面或模态对话框时。这里的"子窗口"通常指的是弹出的窗口、框架或者iframe,而"父窗口"则是打开子窗口的那个主页面。在这样的场景...

    Qt6:子窗口向父窗口传值(多控件版)

    在Qt6框架中,开发GUI应用程序时,我们经常会遇到子窗口与父窗口之间通信的需求,尤其是在涉及多个控件交互的场景。子窗口向父窗口传递数据是常见的操作,例如用户在子窗口中填写表单后,点击确认按钮,将表单数据...

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

    本示例探讨的是如何将JSP与JavaScript结合,实现父窗口与子窗口之间的数据通信及页面刷新功能,特别涉及了Ajax查询数据和表格渲染。以下是关于这些知识点的详细解释: 1. **JSP(JavaServer Pages)**:JSP是一种...

    C#子窗口与父窗口的交互-使用委托与事件

    现在,让我们看如何在父窗口和子窗口之间使用委托和事件进行交互。 1. **创建子窗口:** 首先,创建一个子窗口类(如`ChildWindow`),在这个类中定义一个事件。例如,我们可以定义一个`DataChanged`事件,用于通知...

    在固定位置创建子窗口,点击父窗口自动隐藏子窗口

    这个场景中的“在固定位置创建子窗口,点击父窗口自动隐藏子窗口”涉及到了窗口管理、事件处理以及窗口之间的通信等多方面的知识点。 1. **窗口管理**:窗口管理是操作系统或应用程序中用于控制窗口显示和操作的...

    Qt--子窗口向父窗口传值

    - **连接信号和槽**:在子窗口实例化后,使用`connect()`函数将子窗口的信号与父窗口的槽函数连接起来。 - **触发信号**:在子窗口中,当需要发送数据时,比如在按钮点击事件中,发射信号。 - **接收并处理数据**...

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

    在HTML中,`&lt;iframe&gt;`元素用于嵌入...总之,HTML中的`&lt;iframe&gt;`提供了丰富的功能,允许父窗口和子窗口之间进行复杂的交互,包括数据交换、窗口控制等。正确理解和运用这些技巧,可以构建出更动态、交互性强的网页应用。

    子窗口刷新父窗口总结

    ### 子窗口刷新父窗口技术总结 在网页开发中,我们常常遇到需要在子窗口完成某些操作后,刷新或更新父窗口...通过适当的编程策略,可以有效地在子窗口操作完毕后,触发父窗口的刷新,提升用户体验和程序功能的连贯性。

    父窗口与子窗口间的调用

    在Web开发中,经常会遇到需要在父窗口和子窗口之间进行数据交换的情况。本文将详细介绍如何使用JavaScript实现父窗口与子窗口之间的调用以及值的传递。 #### 一、基本概念 1. **父窗口**:通常指打开新窗口的原始...

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

    - 通过`window.postMessage()`方法,子窗口和父窗口之间可以安全地传递数据,这是HTML5引入的一个跨文档通信机制。 2. **DHTML(Dynamic HTML):** - DHTML是HTML、CSS、JavaScript和DOM的结合,使得网页动态...

    C#父窗口子窗口示例

    在C#编程中,"父窗口子窗口示例"通常是指在Windows Forms应用程序中创建一个主窗口(父窗口)并在其内部嵌套一个或多个子窗口。这种设计模式广泛应用于多文档界面(MDI,Multiple Document Interface)或者对话框式...

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

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

    c#利用委托来实现关闭子窗口通知父窗口执行方法

    ### C#中利用委托实现子窗口关闭时通知父窗口执行特定方法 在C#中,事件和委托是非常重要的概念,特别是在处理用户界面交互时。本文将详细介绍如何利用委托(Delegate)来实现在关闭子窗口时通知父窗口执行特定的...

Global site tag (gtag.js) - Google Analytics