`
azrael6619
  • 浏览: 578315 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js子窗口与父窗口的调用

阅读更多

子窗口与父窗口的调用 

注意:要用open打开才行,如果用openModal打开则会访问不到opener.

顺便说下open的参数:

 

window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no') //这是一行的内容

 

 

参数说明

'page.html' 弹出窗口的文件名; 'newwindow' 弹出的新窗口的名字,非必须,可用空''代替; 
height=100 高度; width=400 宽度; top=0 窗口距离屏幕上方的象素值; left=0 窗口距离屏幕左侧的象素值; 
toolbar=no 是否显示工具栏,yes为显示; menubar,scrollbars 表示菜单栏和滚动栏;
resizable=no 是否允许改变窗口大小,yes为允许; location=no 是否显示地址栏,yes为允许;
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许; 


1、从子窗口中往父窗口传值
如父页面有一个控制的id是choosedProvider,那么这样可以把值传给父页面:

opener.document.getElementById("choosedProvider").value="Tom";

 
2、从父窗口传值给子窗口,如子窗口中有id为T的控件,此时可以用如下传值:

<script>
var newWindow;
function openWindow(url){
newWindow = window.open(“new.htm”, "", "width=400,height=300 ");
}
function changeChild(){
newWindow.document.getElementById("T").value="我变了";
}
</script>

 
       先抓住其句柄,然后通过句柄操作,其实比较上面的子窗口往父窗口中传值,就是操作的对象改变了一下。
3、子窗口关闭并刷新父口,这里有两种方式:
a)         子窗口关闭时关闭父窗口:

opener.location.reload();
window.close();

 
b)        父窗口去检测,子窗口是否已经关闭了,在设定的一段时间之后自动刷新:

<script>
var newWindow;
var timer;
function openWindow(url) {
       newWindow = window.open(url, "", "width=400,height=300,resizable=yes");
       timer = setInterval("updateAfterClose()", 1000);
}
 
function updateAfterClose() {
       //父窗口去检测子窗口是否关闭,然后通过自我刷新,而不是子窗口去刷新父窗口
       if(newWindow.closed == true) {
       clearInterval(timer);
       self.location.reload(); // 主窗口刷新
       return;
       }
}
</script>

 
4、父窗口关闭的时候关闭子窗口。这个就是用方法去检测父窗口的onunload事件:

<script>
var newWindow;
function openWindow(url) {
newWindow = window.open(url, "", "width=400,height=300,resizable=yes"); 
}
function closeChild()
{
newWindow.close();
}
</script>

 
在body加上onunload事件:

<body onunload="closeChild()">

 
5、子窗口中关闭父窗口,这个功能可能相对要少用一点:

<script>
function closeParent()
{
opener.close();
}
</script>
<input type=button value="关闭父窗口" onclick=closeParent()>

 

分享到:
评论

相关推荐

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

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

    JS子窗口调用父窗口

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

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

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

    子窗口与父窗口刷新

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

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

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

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

    模态子窗口通常由JavaScript或者jQuery库(如Bootstrap)创建,它们可以通过事件监听或回调函数与父窗口进行通信。在HTML中,模态窗口往往被包含在一个`&lt;div&gt;`元素中,通过CSS设置为不可见,并在需要时通过...

    父窗口与子窗口间的调用

    本文将详细介绍如何使用JavaScript实现父窗口与子窗口之间的调用以及值的传递。 #### 一、基本概念 1. **父窗口**:通常指打开新窗口的原始页面。 2. **子窗口**:由父窗口通过`window.open()`方法打开的新窗口。 ...

    父窗口调用iframe子窗口方法

    在Web开发中,"父窗口调用iframe子窗口方法"是一个常见的交互场景,尤其是在构建复杂的单页面应用或者需要跨窗口通信时。这篇文章将详细讲解如何实现这个功能,并提供相关的源码示例。 首先,理解基本概念。`iframe...

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

    JavaScript是一种广泛应用...总之,JavaScript提供的窗口操作能力使得子窗口与父窗口之间的通信变得可能,这对于构建动态和交互丰富的Web应用至关重要。通过深入研究这个主题,开发者能够创建更加灵活和响应式的网页。

    子窗口刷新父窗口总结

    通过在子窗口中调用`window.opener.location.reload()`,可以实现在子窗口关闭时刷新父窗口。具体实现如下: ```javascript // 子窗口代码 window.close(); if (条件满足) { window.opener.location.reload(); } `...

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

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

    子窗口传值到父窗口.rar

    在Web开发中,有时我们需要在子窗口与父窗口之间传递数据。这通常发生在弹出窗口或者框架集等场景中,用户在子窗口进行操作后,需要将结果反馈给父窗口,以便更新父窗口的状态或展示相关信息。这个过程就称为“子...

    子窗口向父窗口传递值

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

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

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

    jquery、js调用iframe父窗口与子窗口元素的方法整理.docx

    jquery、js调用iframe父窗口与子窗口元素的方法整理 在Web开发中,iframe是一个常用的技术,用于在一个HTML文档中嵌入另一个HTML文档。然而,在使用iframe时,经常会遇到一个问题:如何在iframe中访问父窗口的元素...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    EasyUI提供了一种方式,通过`parent`关键字来访问父窗口的对象,从而调用其上的函数。假设在父页面上有一个名为`updateParentData`的函数,可以在子页面中这样调用: ```javascript parent.updateParentData('子...

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

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

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

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

    jquery、js调用iframe父窗口与子窗口元素的方法整理

    以上就是jQuery和JavaScript调用iframe父窗口与子窗口元素的方法。在实际应用中,要注意跨域问题,如果父页面和iframe的源不同,它们之间的交互可能会受到浏览器同源策略的限制。此外,确保正确引用jQuery库,并且在...

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

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

Global site tag (gtag.js) - Google Analytics