`
azrael6619
  • 浏览: 574603 次
  • 性别: 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()>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics