前些日子，一直奔波于这三种操作，想想以后会常用，干脆整理下来，供自己以后查看。也给大家分享一下！
以下面写出自己认为有用的操作和代码。
第一次在园里面写，肯定有很多不足够之处，希望大家多多指点。
一、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");
}
}
JavaScript父窗口与子窗口相互操作.rar
标签: javascript, 父窗口, 子窗口, window.open, window.showModalDialog, iframe
分享到：
相关推荐
在JavaScript编程中，`window.showModalDialog`是一个用于打开模态对话框的函数，它能够创建一个新的浏览器窗口或者在当前窗口内显示一个弹出层，阻止用户与父窗口的交互，直到用户关闭对话框为止。这个方法在创建...
在网页开发中，有时我们需要从一个弹出的子窗口（通常是由 `window.open` 或 `window.showModalDialog` 方法打开的）来控制父窗口的行为，比如刷新父窗口的页面。这在很多应用场景下都非常有用，比如用户在子窗口...
本文将详细介绍使用`window.showModalDialog`和`window.open`两种方式打开新窗口后，如何取得并操作父窗口的方法。 首先，`window.showModalDialog`是一个JavaScript函数，用来打开一个模态对话框窗口，并在其中...
JavaScript 模式化窗口是一种创建弹出式对话框的技术，常用于在用户与网页交互时提供额外信息或操作。在本文中，我们将讨论在使用模式化窗口时遇到的问题及其解决方案，特别是与`window.dialogArguments`对象相关的...
通过`window.open()`函数打开的子窗口刷新父页面 - **语法**: `window.opener.location.reload();` - **应用场景**: 当用户在一个新窗口操作后需要返回主窗口时，可以通过这种方式刷新主窗口。 ##### 3. 刷新某一...
在JavaScript中，打开新窗口是常见的操作，常用于创建弹出窗口、对话框或实现特定交互。`window.open`函数是实现这一功能的核心方法。它接受三个参数：要打开的URL、新窗口的名称（可选）以及一个包含窗口属性的字符...
另一种情况是使用`window.showModalDialog()`方法打开子窗口，这个方法会显示一个模态对话框，用户必须关闭对话框才能与父窗口进行交互。当子窗口关闭时，可以设置`window.returnValue`来传递信息给父窗口，如下所示...
如果当前页面是子窗口，想要刷新父窗口，可以使用`self.opener.location.reload()`。`self`指的是当前窗口，`opener`则指向创建它的父窗口。 ```javascript <script language="JavaScript"> self.opener.location....
然而，由于浏览器的兼容性和安全性问题，`showModalDialog`在现代Web开发中逐渐被弃用，取而代之的是更灵活的`modal`组件或者`window.open`方法。 在标题提到的问题中，当使用`showModalDialog`并结合`iframe`来...
在JavaScript中，有时我们需要在操作子页面的同时刷新父页面，以确保父页面的数据与子页面的交互保持同步。本文将详细介绍几种不同的JavaScript方法，用于刷新父页面。 1. 使用`iframe`刷新父页面 当父页面包含一...
当子页面是通过`window.open()`函数弹出的新窗口时，`window.opener`引用的是打开该子窗口的父窗口。因此，可以使用`window.opener.location.reload()`来刷新父窗口。 ```javascript <script language="...
常用iframe<iframe id="IFramewindow" width="0" height="0" name='IFramewindow'></iframe> -2.常用 //错误提示 function AlertErrorMeg(meg){ alert(meg); } //提示转向 function AlertRedirect(meg,url){ ...
### 子窗口创建及父窗口与子窗口之间的通信 #### 1. 使用JavaScript弹出子窗口 创建子窗口是浏览器提供的一个特性，JavaScript通过`window.open()`方法实现。这个方法可以指定窗口的URL、名称和各种参数。例如： ...
由于模态对话框在不同浏览器之间的兼容性问题，以及在某些JavaScript框架（如jQuery Mobile等）中已不再推荐使用`showModalDialog`，我们可以考虑使用`iframe`来作为模态窗口的替代方案。通过动态地将`iframe`内容...
在前端JavaScript开发中，经常需要与浏览器窗口打交道，包括如何打开新窗口、获取父窗口链接以及控制窗口的各种属性。本文将详细介绍JavaScript中关于获取父窗口链接的getParent方法，以及几种常见的打开窗口的方法...
在JavaScript编程中，有时我们需要在不同的窗口之间传递数据，例如在一个父窗口中打开一个子窗口，然后让子窗口处理一些信息后将结果回传给父窗口。在这个场景中，我们通常会使用`window.open()`或`window....
替代方法是使用`window.open(pageURL,name,parameters)`来打开新窗口，如果需要传递参数，可以借助frame或iframe。 2. 总结 - 在编写JS时，建议使用ID而非name来定义对象变量，因为Firefox不支持HTML对象ID直接作为...
建议使用`window.open()`替代，需要传递参数时可借助frame或iframe。 2. **总结与建议** - **使用ID而非name**：在JavaScript中定义对象变量时，推荐使用HTML元素的ID，而不是name，因为ID在Firefox中不能直接...