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

js子窗口和父窗口交互 转

阅读更多

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>

分享到:
评论

相关推荐

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

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

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

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

    子窗口与父窗口刷新

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

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

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

    子窗口刷新父窗口总结

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

    JS子窗口调用父窗口

    ### JS子窗口调用父窗口的关键知识点 #### 一、基本概念 在JavaScript中,有时我们需要从一个子窗口(通常是通过`window.open()`方法打开的新窗口)与父窗口(即打开该新窗口的原始窗口)之间进行交互。这种交互...

    子窗口向父窗口传递值

    本文将详细介绍如何在父窗口和子窗口之间传递数据,重点是“子窗口向父窗口传递值”。 首先,我们来看如何打开子窗口并传递数据。通常,我们可以使用`window.open()`函数来创建一个新的浏览器窗口。例如: ```...

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

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

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

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

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

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

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

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

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

    本教程将深入探讨如何在子窗口通过JS操作父窗口中的元素,涉及到的关键技术包括JavaScript、HTML和DOM(Document Object Model)。 1. **JavaScript基础知识**: - JavaScript是一种解释型的、轻量级的编程语言,...

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

    ### JavaScript 实际应用:子窗口与父窗口交互详解 在前端开发中,有时我们需要实现不同窗口之间的信息交换,比如从父窗口向子窗口传递数据,或者反过来从子窗口向父窗口返回信息。本文将通过具体示例来详细介绍...

    js 控制父子窗口 转向

    标题"js 控制父子窗口 转向"所涉及的知识点主要集中在如何使用JavaScript来实现子窗口对父窗口的控制,以及父窗口对子窗口的导航操作。下面将详细阐述这些知识点。 首先,我们需要理解浏览器窗口的概念。在...

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

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

    刷新父窗口的多种方法

    通过上述介绍,我们可以看出,根据具体的应用场景和需求,可以选择不同的方法来实现子窗口刷新父窗口的目标。每种方法都有其适用的场合和局限性,开发者应该根据实际需求选择最合适的方式。此外,随着浏览器技术的...

    父窗口与子窗口间的调用

    1. **跨域限制**:如果子窗口的URL与父窗口不同源,则不能通过`window.opener`或`window.parent`进行交互。 2. **安全性问题**:在处理窗口间通信时,应注意防止恶意脚本注入等安全风险。 3. **兼容性**:不同的...

    js父窗口跟子窗口的互刷

    在JavaScript编程中,"父窗口跟子窗口的互刷"是指在浏览器环境中,一个窗口(父窗口)与打开的新窗口(子窗口)之间进行数据交换和状态更新的技术。这种技术通常用于实现弹出窗口间的通信,例如购物车详情或者多步骤...

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

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

    js 子窗体调用父窗体中的方法

    在网页开发中,有时我们需要在弹出的子窗口与父窗口之间进行交互,例如子窗口向父窗口传递数据或调用父窗口的方法。这在处理用户界面交互和数据同步时非常常见。本篇将详细讲解如何使用JavaScript实现子窗体调用父...

Global site tag (gtag.js) - Google Analytics