`
flyzhouke
  • 浏览: 19374 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

阅读更多

前些日子,一直奔波于这三种操作,想想以后会常用,干脆整理下来,供自己以后查看。也给大家分享一下!
        以下面写出自己认为有用的操作和代码。

        第一次在园里面写,肯定有很多不足够之处,希望大家多多指点。

 


一、Iframe 篇

 


//&&&&&&&&&&&&&&&&&&&&公共方法开始&&&&&&&&&&&&&&&

//父对象得到子窗口的值

//ObjectID是窗口标识,ContentID是元素ID

function GetValue(ObjectID,ContentID)

{

       var IsIE = (navigator.appName == 'Microsoft Internet Explorer')

                     if(IsIE)

                     {//如果是IE         

                            alert(document.frames(ObjectID).document.getElementById(ContentID).innerHTML);                              

                     }

                     else

                     {//如果是FF

                             alert(document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML);

                                   //FF下不支持innerText; 下面是解决方法                     

                                   //if(document.all){

                                   //  alert(document.getElementById('div1').innerText);

                                   //} else{

                                   //  alert(document.getElementById('div1').textContent);

                                   //}

                     }    

}

 

//父对象向子窗口赋值

//ObjectID是窗口标识,ContentID是元素ID

function SetValue(ObjectID,ContentID)

{

var IsIE = (navigator.appName == 'Microsoft Internet Explorer')

              if(IsIE)

              {//如果是IE         

                     document.frames(ObjectID).document.getElementById(ContentID).innerHTML="我是IE下通过父窗口赋值过来的";                            

              }

              else

              {//如果是FF

                      document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML="我是FF下通过父窗口赋值过来的";                  

              }    

}

//&&&&&&&&&&&&&&&&&&&&公共方法结束&&&&&&&&&&&&&&&

 

 

      1.父窗口对子窗口操作

 

刷新:

      document.getElementById("IframeID").src=document.getElementById("IframeID").src+"?_="+Math.random();

上面这种方法有时需要对“src”属性处理一下。

 

取值:

//父窗口取子窗口的值

       GetValue("Iframe1","IframeDiv");

 

赋值:

//父窗口设置窗口元素的值;

       SetValue("Iframe1","IframeDiv");      

 

   2.子窗口操作父窗口

 

              刷新:

           (1)、window.parent.location.href=window.parent.location.href;  

           (2)、window.parent.location.reload();

              (3)、大家可以补充

 

    取值:

alert(window.parent.document.getElementById("IframeDiv").innerHTML);    

 

赋值:

window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值";

 

关闭:

window.parent.opener=null;//如果不加这句,会提示关闭询问窗口;

window.parent.close();

二、window.open 篇

1.父窗口对子窗口操作

打开:

var win=null;

win=window.open("Open.html","win","width=200,height=200");

 

最大化:

//窗口最大化

function SonMaximize()

{

       if(win&&win.open&&!win.closed)

       {

              win.moveTo(-4,-4);

              win.resizeTo(screen.availWidth+8,screen.availHeight+8);

       }else{

              alert('还没有打开窗口或已经关闭');

       }

}

 

最小化:

//窗口最小化

function SonMinimize()

{

       if(win&&win.open&&!win.closed)

       {

              win.resizeTo(0,0);

              win.moveTo(0,window.screen.width);

       }else{

       alert('还没有打开窗口或已经关闭');

       }    

}

 

 

 

关闭:

//关闭窗口

function CloseSon()

{

       if(win&&win.open&&!win.closed)

       {

              win.opener=null;

              win.close()

       }else{

              alert('还没有打开窗口或已关闭') ;

       }

}

 

刷新:

//刷新

function RefreshSon()

{

       if(win&&win.open&&!win.closed)

       {

              win.location.reload();

              win.focus();

       }else{

              alert('窗口还没有打开或已关闭');

       }

}

 

查看窗口大小:

function ViewSonSize()

{

       if(win&&win.open&&!win.closed)

       {

              alert(win.document.body.clientWidth+'*'+win.document.body.clientHeight);

              win.focus();

       }else

       {

              alert(' 还没有打开窗口或者已关闭');

       }    

}

 

取值:

alert(window.document.getElementById("OpenDiv").innerHTML);

 

赋值:

win.document.getElementById("OpenDiv").innerHTML="我是从父窗口中传过来的值";

 

2.子窗口操作窗口

 

刷新:

window.opener.location.reload();

       //下面这种方法也可以

       //window.parent.location.href=window.parent.location.href;

 

 

 

 

 

关闭本窗口:

//关闭本窗口

function CloseWindow()

{     //window.opener.opener=null;

       window.close();

}

 

关闭父窗口:

//关闭父窗口

function CloseParent()

{     //火狐下不起作用,如果要想起作用。用下面的方法

    //开firefox,在地址栏输入about:config      

       //找到dom.allow_scripts_to_close_windows这项并改为true

              var IsIE = (navigator.appName == 'Microsoft Internet Explorer')

              if(IsIE){//如果是IE            

                     window.opener.opener=null;

                     window.opener.close();

                     window.close();     

              }else{

                     alert("火狐不能直接关闭;需要以下设置1.开firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true");

              }

      

}

 

取值:

alert(window.opener.document.getElementById("OpenDiv").innerHTML);     

 

赋值:

window.opener.document.getElementById("OpenDiv").innerHTML="我是从子窗口Open传过来的值";           

 

三、模态窗口篇

1.父窗口操作子窗口

父窗口JS代码:

var parValue="现在显示了父窗口中的变量值";

var hao="郝建卫";

function ShowDailog(PageHref,Title,Height,Width)

{

       //--------------left位置

       //screen.availHeight声明了显示浏览器的屏幕的可用宽度

       var dleft =(screen.availHeight-Height)/2;

       //--------------top位置

       var dtop =(screen.availWidth-Width)/2;

       //---------------

 

Var sRet = window.showModalDialog(PageHref,window,Title,"scrollbars=yes;resizable=no;help=no;status=no;center=yes;dialogTop=25;dialogLeft="+ dleft +";dialogTop="+ dtop +";dialogHeight="+Height+"px;dialogWidth="+Width+"px;");

       //--------return

       if (sRet =="refresh")//这种是利用返回值来刷新父页面

       {

              window.Test="true";

              window.location.reload();            

              alert(window.Test);

       }

}

function test()

{

       alert("模态窗口成功调用父窗口的方法");

}

2.模态窗口操作父窗口

var parentWin=window.dialogArguments;

 

刷新:

       parentWin.location.reload();

 

取值:

alert(parentWin.document.getElementById("ShowModalDialogDiv").innerHTML)   //获取父窗口中的对象

 alert("我是从父窗口中得到的变量>>>"+parentWin.parValue);       //获取父窗口中的变量

 

调用父窗口JS方法:

parentWin.test();    //调用父窗口中的方法

 

赋值:

parentWin.document.getElementById("ShowModalDialogDiv").innerHTML="我是从子窗口ShowModalDialog传过来的值";      

 

关闭本窗口:

//关闭本窗口

function CloseWindow()

{

       window.parent.close();

}

 

关闭父窗口:

//关闭父窗口

function CloseModal()

{    

       var IsIE = (navigator.appName == 'Microsoft Internet Explorer')

              if(IsIE){//如果是IE            

                     window.parent.parent.close();

                     //parentWin.opener=null;如果把上面的换成这行,不能关闭父窗口,

                     parentWin.close();

                     //window.parent.parent.parent.parent.close();这个只能关闭模态窗口本身目前只在IE6下测试

              }else{

                     alert("火狐不能直接关闭;需要以下设置1.开firefox,在地址栏输入about:config;2.找到dom.allow_scripts_to_close_windows这项并改为true");

              }    

}

分享到:
评论

相关推荐

    window.showModalDialog方法的使用

    在JavaScript编程中,`window.showModalDialog`是一个用于打开模态对话框的函数,它能够创建一个新的浏览器窗口或者在当前窗口内显示一个弹出层,阻止用户与父窗口的交互,直到用户关闭对话框为止。这个方法在创建...

    javascript刷新父页面

    在网页开发中,有时我们需要从一个弹出的子窗口(通常是由 `window.open` 或 `window.showModalDialog` 方法打开的)来控制父窗口的行为,比如刷新父窗口的页面。这在很多应用场景下都非常有用,比如用户在子窗口...

    javascript showModalDialog,open取得父窗口的方法

    本文将详细介绍使用`window.showModalDialog`和`window.open`两种方式打开新窗口后,如何取得并操作父窗口的方法。 首先,`window.showModalDialog`是一个JavaScript函数,用来打开一个模态对话框窗口,并在其中...

    js模式化窗口问题![window.dialogArguments]

    JavaScript 模式化窗口是一种创建弹出式对话框的技术,常用于在用户与网页交互时提供额外信息或操作。在本文中,我们将讨论在使用模式化窗口时遇到的问题及其解决方案,特别是与`window.dialogArguments`对象相关的...

    javascript 页面刷新和模态对话框 学习总结 推荐哦

    通过`window.open()`函数打开的子窗口刷新父页面 - **语法**: `window.opener.location.reload();` - **应用场景**: 当用户在一个新窗口操作后需要返回主窗口时,可以通过这种方式刷新主窗口。 ##### 3. 刷新某一...

    js中打开新窗口的各种方法.doc

    在JavaScript中,打开新窗口是常见的操作,常用于创建弹出窗口、对话框或实现特定交互。`window.open`函数是实现这一功能的核心方法。它接受三个参数:要打开的URL、新窗口的名称(可选)以及一个包含窗口属性的字符...

    js关闭子窗体刷新父窗体实现方法

    另一种情况是使用`window.showModalDialog()`方法打开子窗口,这个方法会显示一个模态对话框,用户必须关闭对话框才能与父窗口进行交互。当子窗口关闭时,可以设置`window.returnValue`来传递信息给父窗口,如下所示...

    javascript刷新父页面的各种方法汇总

    如果当前页面是子窗口,想要刷新父窗口,可以使用`self.opener.location.reload()`。`self`指的是当前窗口,`opener`则指向创建它的父窗口。 ```javascript <script language="JavaScript"> self.opener.location....

    在使用showModalDialog中为解决刷新时弹出新窗口时用到iframe所带来的一个问题

    然而,由于浏览器的兼容性和安全性问题,`showModalDialog`在现代Web开发中逐渐被弃用,取而代之的是更灵活的`modal`组件或者`window.open`方法。 在标题提到的问题中,当使用`showModalDialog`并结合`iframe`来...

    javascript刷新父页面方法汇总详解

    在JavaScript中,有时我们需要在操作子页面的同时刷新父页面,以确保父页面的数据与子页面的交互保持同步。本文将详细介绍几种不同的JavaScript方法,用于刷新父页面。 1. 使用`iframe`刷新父页面 当父页面包含一...

    JS刷新父窗口的几种方式小结(推荐)

    当子页面是通过`window.open()`函数弹出的新窗口时,`window.opener`引用的是打开该子窗口的父窗口。因此,可以使用`window.opener.location.reload()`来刷新父窗口。 ```javascript <script language="...

    107个常用javascript语句

    常用iframe<iframe id="IFramewindow" width="0" height="0" name='IFramewindow'></iframe> -2.常用 //错误提示 function AlertErrorMeg(meg){ alert(meg); } //提示转向 function AlertRedirect(meg,url){ ...

    解析jquery获取父窗口的元素

    ### 子窗口创建及父窗口与子窗口之间的通信 #### 1. 使用JavaScript弹出子窗口 创建子窗口是浏览器提供的一个特性,JavaScript通过`window.open()`方法实现。这个方法可以指定窗口的URL、名称和各种参数。例如: ...

    js关闭模态窗口刷新父页面或跳转页面

    由于模态对话框在不同浏览器之间的兼容性问题,以及在某些JavaScript框架(如jQuery Mobile等)中已不再推荐使用`showModalDialog`,我们可以考虑使用`iframe`来作为模态窗口的替代方案。通过动态地将`iframe`内容...

    解析js中获得父窗口链接getParent方法以及各种打开窗口的方法

    在前端JavaScript开发中,经常需要与浏览器窗口打交道,包括如何打开新窗口、获取父窗口链接以及控制窗口的各种属性。本文将详细介绍JavaScript中关于获取父窗口链接的getParent方法,以及几种常见的打开窗口的方法...

    JS简单实现父子窗口传值功能示例【未使用iframe框架】

    在JavaScript编程中,有时我们需要在不同的窗口之间传递数据,例如在一个父窗口中打开一个子窗口,然后让子窗口处理一些信息后将结果回传给父窗口。在这个场景中,我们通常会使用`window.open()`或`window....

    Ie和firefox的Js区别

    替代方法是使用`window.open(pageURL,name,parameters)`来打开新窗口,如果需要传递参数,可以借助frame或iframe。 2. 总结 - 在编写JS时,建议使用ID而非name来定义对象变量,因为Firefox不支持HTML对象ID直接作为...

    浏览器中JS的兼容问题.docx

    建议使用`window.open()`替代,需要传递参数时可借助frame或iframe。 2. **总结与建议** - **使用ID而非name**:在JavaScript中定义对象变量时,推荐使用HTML元素的ID,而不是name,因为ID在Firefox中不能直接...

Global site tag (gtag.js) - Google Analytics