`
shuai1234
  • 浏览: 977611 次
  • 性别: Icon_minigender_1
  • 来自: 山西
社区版块
存档分类
最新评论

分析一下网页子窗口和网页父窗口的交互

阅读更多

1、父窗口传递信息给子窗口

看代码实例:

<script language=javascript>

function outPut()
...{
 
//获取父窗口的文本信息赋值给text
 var text = document.abc.text.value;
 
//打开子窗口,并且把操作句柄赋值给win变量,以下所有操作都是针对win对象的
 var win = window.open("","mywin""menubar=no,width=400,height=100,resizeable=yes");
 
//输出基本信息
 win.document.writeln("<title>输出结果</title>");
 win.document.writeln(
"你的信息是:<p>");
 
//输出从父窗口获取的信息
 win.document.writeln(text);
 win.document.close();
 win.focus();
}

</script>
<form name=abc method=post>
<input type=text name=text size=50>
//调用上面的函数
<input type=button value=提交 onClick="outPut()">

</form>

 

2、子窗口传递参数给父窗口

我们对上面的代码进行改造:

<script language=javascript>
function outPut()
...{
 
var text = document.abc.text.value;
 
var win = window.open("","mywin""menubar=no,width=400,height=100,resizeable=yes");
 win.document.writeln(
"<title>输出结果</title>");
 win.document.writeln(
"你的信息是:<p>");
 win.document.writeln(text);
 win.document.writeln(
"<input type=text name=child value=子窗口信息>");

 
//对子窗口本身操作,使用self对象,对父窗口操作使用opener对象,这是关键
 //把子窗口中表单的值回传给父窗口,取代父窗口表单以前的值,然后关闭子窗口
 win.document.writeln("<input type=button value=关闭自己 onClick='window.opener.abc.text.value=self.child.value;self.close()'>");
 
//可以控制关闭父窗口
 win.document.writeln("<input type=button value=关闭父窗口 onClick='window.opener.opener=null;window.opener.close()'>");
 
//刷新父窗口
 win.document.writeln("<input type=button value=刷新父窗口 onClick='window.opener.location.reload()'>");

 win.document.close();
 win.focus();
}

</script>
<form name=abc method=post>
<input type=text name=text size=50>
<input type=button value=提交 onClick="outPut()">
</form>

 

3、不是同页面的子窗口和父窗口交互

假设我们涉及到外部程序,比如php、asp等等,那么我们处理的可能是两个页面,比如,上传功能,我们就是需要打开一个新页面,然后再把新页面中的值传递给父页面。
局部代码实例:

<input type="input" value="" name="input_tag" id = "input_tag" onKeyUp="clearPreTagStyle()" size="40">
<input type="hidden" value="0" name="tagid" id="tagid">
<input type="button" value="标签" onclick="popUpWindow('tag.php?tag='+escape(document.tryst_form.input_tag.value))">

以上是父窗口的部分代码,里面的popUpWindow是封装好的window.open函数,所以理解面面的tag.php是另外一个页面就可以,我们需要把当前表单中的值提交给tag.php页面去处理。
tag.php部分代码:

查询标签结果:

<href="#" name="tag_1">生活</a><href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_1.innerHTML">加入该标签</a>

<href="#" name="tag_2">生活秀</a><href="#" onclick="opener.document.tryst_form.input_tag.value = document.tag_2.innerHTML">加入该标签</a>

这个就是我们的子窗口,我们要把tag_1和tag_2返回到子窗口中,虽然他们不是同一个页面。这里有个知识点,就是我们如何获取连接中的值,我们使用innerHTML属性:document.tag_2.innerHTML 这个就是我们获取了tag_2的值“生活秀”,我们也能使用其他方法获取,比如:document.all.tag_2.innerHTML,或者this.innerHTML就是指本身的链接的值。

访问父窗口也是使用opener对象来处理:opener.document.tryst_form.input_tag.value,就能够改变父窗口的值。

分享到:
评论

相关推荐

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

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

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

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

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

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

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

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

    子窗口与父窗口刷新

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

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

    例如,一个网页中的超链接可以使用`window.open()`方法打开一个新的窗口,新窗口就是子窗口,而原来的窗口则是父窗口。 ### 父窗口向子窗口传值 1. **通过`window.open()`方法传参**:在创建子窗口时,可以通过URL...

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

    子窗口通常用于提供附加信息或功能,而父窗口则是主要的交互界面。这个场景中的“在固定位置创建子窗口,点击父窗口自动隐藏子窗口”涉及到了窗口管理、事件处理以及窗口之间的通信等多方面的知识点。 1. **窗口...

    子窗口刷新父窗口总结

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

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

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

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

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

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

    - 子窗口和父窗口可以共享存储在cookies或localStorage、sessionStorage中的数据,但这种方法有数据大小限制和安全性问题。 5. **事件监听和触发:** - 子窗口可以触发一个全局事件,而父窗口通过监听这个事件来...

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

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

    在父窗口不透明的情况下,实现子窗口的半透明效果

    如果尝试在子窗口上设置重叠(overlap)或弹出(popup)样式,并使用这个API,虽然可以实现半透明,但往往难以处理与主窗口的交互,如跟随移动、显示/隐藏等操作。 作者提出了一种解决方案,即通过重载子窗口的`...

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

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

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

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

    Qt6:子窗口向父窗口传值

    在Qt6框架中,子窗口向父窗口传递数据是一个常见的需求,这通常涉及到窗口间的通信。Qt6提供了多种方法来实现这种通信,包括信号与槽、共享数据对象、全局变量等。下面我们将深入探讨这些方法,并通过实例进行解析。...

    子窗口向父窗口传递值

    总结一下,子窗口向父窗口传递值主要依赖于`window.parent`和`window.opener`这两个属性,它们允许子窗口访问并操作父窗口的DOM元素。通过结合查询字符串传递初始数据和JavaScript操作,可以实现复杂的跨窗口通信。...

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

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

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

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

    单击按钮在固定位置创建子窗口,单击父窗口的时自动隐藏子窗口.

    "单击按钮在固定位置创建子窗口,单击父窗口时自动隐藏子窗口"这一功能常见于各种桌面应用程序,它涉及到窗口管理、事件处理以及用户交互等多个方面。下面我们将详细探讨这个知识点。 首先,我们要理解“子窗口”和...

Global site tag (gtag.js) - Google Analytics