js操作frame详细解说,window.opener和window.parent的区别

合集下载

Js中的Parent对象

Js中的Parent对象文章分类:Web前端该变更永远指分割窗口最高层次的浏览器窗口。

如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。

parent：该变量指的是包含当前分割窗口的父窗口。

如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。

opener：指用WINDOW.OPEN等方式创建的新窗口对应的原窗口。

附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系：Windows对象→Parent对象→Frame对象→Document对象→Form对象，如下：parent.frame1.document.forms[0].elements[0].value;问题：在一个页面嵌入框架<iframe>，然后在框架中使用javascript脚本：parent.xx.value='xxxxx'; 在IE中可以正常看到赋值，但是在firefox中则不能完成赋值。

请问在firefox中调用父框架的对象应该是哪个，是否和IE兼容？解答：window.parent.document.form名.xx.value='xxxxx'; window可省略。

parent.document.form名.xx.value='xxxxx'; parent.document.getElementById("xx").value='xx xxx';window.parent与window.opener的区别 javascript调用主窗口方法1： window.parent 是iframe页面调用父页面对象举例: a.html<html><head><title>父页面</title></head><body><form name="form1" id="form1"><input type="text" name="username" id="username"/></form><iframe src="b.html" width=100%></iframe></body></html>如果我们需要在b.htm中要对a.htm中的username文本框赋值（就如很多上传功能，上传功能页在Ifrmae中，上传成功后把上传后的路径放入父页面的文本框中），我们应该在b.html中写：<script type="text/javascript">var _parentWin = window.parent ;_ername.value = "xxxx";</script>2： window.opener 是window.open 打开的子页面调用父页面对象opener：对打开当前窗口的window对象的引用，如果当前窗口被用户打开，则它的值为null。

子窗口调用父窗口js方法

子窗口调用父窗口js方法子窗口调用父窗口的JS方法可以通过以下几种方式实现：通过window对象、通过window.opener对象、通过postMessage方法。

1. 使用window对象：在子窗口中，可以通过window.parent来引用父窗口的window对象，从而调用其定义的JS方法。

例如，在父窗口中定义了一个名为testFunc的方法，可以在子窗口中通过以下方式调用：window.parent.testFunc();这样就可以在子窗口中调用父窗口的testFunc方法。

2. 使用window.opener对象：在子窗口中，可以通过window.opener来引用父窗口的window对象，从而调用其定义的JS方法。

例如，在父窗口中定义了一个名为testFunc的方法，可以在子窗口中通过以下方式调用：window.opener.testFunc();这样就可以在子窗口中调用父窗口的testFunc方法。

需要注意的是，使用window.opener对象的前提是，打开子窗口时是通过window.open方法或者target属性指定的，而不是通过a标签或者表单的target属性等其他方式打开的新窗口。

否则，会出现“无法获取opener”的错误。

3. 使用postMessage方法：postMessage方法是HTML5中新增的一个用于多窗口间通信的方法，通过它可以实现跨窗口的消息传递。

在父窗口中，需要定义一个消息事件的监听器，用于接收子窗口发来的消息：window.addEventListener('message', function(event) {if (event.origin !== '子窗口的origin') return; 过滤非法来源的消息处理子窗口发来的消息console.log('收到子窗口发来的消息：', event.data);}, false);在子窗口中，可以使用postMessage方法向父窗口发送消息：window.parent.postMessage('Hello, 父窗口!', '父窗口的origin');这样就可以在子窗口中向父窗口发送消息。

window.open返回的对象的方法

window.open返回的对象的方法`window.open()` 是一个JavaScript方法，用于打开新的浏览器窗口。

这个方法返回一个`Window` 对象，该对象具有多种方法和属性，可以用来控制新打开的窗口。

以下是一些常用的`Window` 对象的方法：1. `close()`: 关闭当前窗口。

注意，这个方法可能由于浏览器的安全策略被禁用，特别是对于非用户触发的事件。

2. `moveTo(x-coord, y-coord)`: 将窗口移动到指定的屏幕坐标。

3. `moveBy(x-offset, y-offset)`: 将窗口从当前位置移动指定的像素值。

4. `resizeTo(width, height)`: 改变窗口的大小。

5. `resizeBy(width-offset, height-offset)`: 相对于当前大小改变窗口的大小。

6. `scroll(x-coord, y-coord)`: 滚动窗口到指定的位置。

7. `scrollBy(x-offset, y-offset)`: 相对于当前位置滚动窗口。

8. `alert()`: 显示一个警告对话框，包含一个消息和确认按钮。

9. `confirm()`: 显示一个确认对话框，包含一个消息、确认和取消按钮。

返回值为`true` 或`false`。

10. `prompt()`: 显示一个提示对话框，包含一个消息和一个文本输入字段。

返回值为用户输入的文本或`null`。

这些方法都是`Window` 对象的一部分，可以通过新打开的窗口对象来调用。

例如：```javascriptlet newWindow = window.open('你需要的地址');newWindow.alert('这是一个警告对话框');```请注意，由于浏览器安全策略和用户设置的限制，某些方法（如`close()`）可能在新打开的窗口中不可用，或者需要特定的用户交互才能执行。

js中parent window的用法

在JavaScript中，"parent window"通常指的是包含当前窗口或页面的窗口。

这通常发生在一个窗口或标签页被另一个窗口或标签页打开时。

当你在一个iframe或新窗口中打开一个网页时，这个新页面或iframe可以访问其父窗口（即打开它的那个窗口）的属性和方法。

这被称为window.parent。

例如，如果你在一个页面中有一个链接，点击这个链接会在新的窗口或标签页中打开一个新页面。

新页面可以通过`window.parent`来访问原始页面。

以下是一些使用`window.parent`的示例：
1. 访问父窗口的属性：
```javascript
console.log(window.parent.document.title); // 输出父窗口的标题
```
2. 调用父窗口中的函数：
```javascript
window.parent.myFunction(); // 调用父窗口中的myFunction函数
```
3. 在iframe中与父窗口通信：
如果你想在一个iframe中与父窗口通信，你可以使用`window.postMessage`方法。

这是一个更安全和更现代的方式，因为它允许你控制哪些窗口可以接收消息，以及如何处理这些消息。

注意：使用`window.parent`时要小心跨站脚本攻击（XSS）。

如果你允许用户输入的内容被插入到`window.parent`中，那么恶意用户可能会尝试插入恶意代码来攻击你的网站。

因此，在处理用户输入时，请始终确保对其进行适当的验证和清理。

Window.Open参数、返回值js弹窗

Window.Open参数、返回值一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法：window.open(pageURL,name,parameters)其中：pageURL为子窗口路径name为子窗口句柄parameters为窗口参数(各参数用逗号分隔)三、示例：<SCRIPT>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')//写成一行</SCRIPT>脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。

请对照。

上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。

四、各项参数其中yes/no也可使用1/0；pixelvalue为具体的数值，单位象素。

JSwindow对象的top、parent、opener含义介绍

JSwindow对象的top、parent、opener含义介绍1.top该变更永远指分割窗⼝最⾼层次的浏览器窗⼝。

如果计划从分割窗⼝的最⾼层次开始执⾏命令，就可以⽤top变量。

2.openeropener⽤于在window.open的页⾯引⽤执⾏该window.open⽅法的的页⾯的对象。

例如：A页⾯通过window.open()⽅法弹出了B页⾯，在B页⾯中就可以通过opener来引⽤A页⾯，这样就可以通过这个对象来对A页⾯进⾏操作。

3.parentparent⽤于在iframe,frame中⽣成的⼦页⾯中访问⽗页⾯的对象。

例如：A页⾯中有⼀个iframe或frame，那么iframe或frame中的页⾯就可以通过parent对象来引⽤A页⾯中的对象。

这样就可以获取或返回值到A页⾯中。

4.另外self 指的是当前窗⼝parent与opener的区别：parent指⽗窗⼝，在FRAMESET中，FRAME的PARENT就是FRAMESET窗⼝。

opener指⽤WINDOW.OPEN等⽅式创建的新窗⼝对应的原窗⼝。

parent是相对于框架来说⽗窗⼝对象opener是针对于⽤window.open打开的窗⼝来说的⽗窗⼝，前提是window.open打开的才有document.parentWindow.menthod()調⽤⽗⾴⾯的⽅法附：Window对象、Parent对象、Frame对象、Document对象和Form对象的阶层关系Window对象→Parent对象→Frame对象→Document对象→Form对象，如下： parent.frame1.document.forms[0].elements[0].value;。

JavaScript中windows.open（）、windows.close（）方法详解

JavaScript中windows.open（）、windows.close（）⽅法详解windows.open()⽅法详解：window.open(URL,name,features,replace)⽤于载⼊指定的URL到新的或已存在的窗⼝中，并返回代表新窗⼝的Window对象。

它有4个可选的参数：URL：⼀个可选的字符串，声明了要在新窗⼝中显⽰的⽂档的 URL。

如果省略了这个参数，或者它的值是空字符串，那么新窗⼝就不会显⽰任何⽂档。

name：⼀个可选的字符串，该字符串是⼀个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗⼝的名称。

这个名称可以⽤作标记 <a> 和 <form> 的属性 target 的值。

如果该参数指定了⼀个已经存在的窗⼝，那么open()⽅法就直接使⽤这个窗⼝。

在这种情况下，指定窗⼝特征的features参数将被忽略。

保留的名字：“_ blank”、“_ parent” 、“_ top”指新窗⼝显⽰位置。

features：(⾮标准的，建议忽略该参数)⼀个可选的字符串，声明了新窗⼝要显⽰的标准浏览器的特征。

如果省略该参数，新窗⼝将具有所有标准特征。

在以下窗⼝特征这个表格中，我们对该字符串的格式进⾏了详细的说明。

replace：⼀个可选的布尔值。

规定了装载到窗⼝的 URL 是在窗⼝的浏览历史中创建⼀个新条⽬，还是替换浏览历史中的当前条⽬。

⽀持的值：true - URL替换浏览历史中的当前条⽬；false - URL在浏览历史中创建新的条⽬。

新的顶层浏览器窗⼝由⽅法 Window.open() 创建。

当调⽤该⽅法时，应把 open() 调⽤的返回值存储在⼀个变量中，然后使⽤那个变量来引⽤新窗⼝。

新窗⼝的 opener 属性反过来引⽤了打开它的那个窗⼝。

请不要混淆⽅法 Window.open() 与⽅法 Document.open()，这两者的功能完全不同。

Iframe、window.open、window.showModalDialog

2.子窗口操作父窗口
刷新：
(1)、window.parent.location.href=window.parent.location.href;
(2)、window.parent.location.reload();
}
else
{//如果是FF
document.getElementById(ObjectID).contentDocument.getElementById(ContentID).innerHTML="我是FF下通过父窗口赋值过来的";
alert(' 还没有打开窗口或者已关闭');
}
}
取值：
alert(window.document.getElementById("OpenDiv").innerHTML);
赋值：
win.document.getElementById("OpenDiv").innerHTML="我是从父窗口中传过来的值&#t; 下面是解决方法
//if(document.all){
// alert(document.getElementById('div1').innerText);
//关闭本窗口
function CloseWindow()
{ //window.opener.opener=null;
window.close();
}
关闭父窗口:
//关闭父窗口
function CloseParent()
{ //火狐下不起作用,如果要想起作用。用下面的方法
总结JavaScript(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

frame框架里的页面要改其他同框架下的页面或父框架的页面就用parentwindow.opener引用的是window.open打开的页面的父页面。

window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面。

可以这样window.frames["iframe"].window.save();window.frames[0].document.getElementByIdx_x('xx');可以这样window.frames[0].document.body.innerHTML;frm = window.parent.window.frames['uploadFrame'];frmDocument = frm.document;frm.sb(3); //sb 是uploadFrame页面里的一个函数对于firefox如果你遇到报错：parent.document.frames has no properties换为如下代码就可以了，这个代码IE,ff兼容. frm = window.parent.window.frames['uploadFrame'];其实frames 集合并不是挂在document 而是挂在window 对象下.注意这样修改frame里的页面有限制，就是必须是同域下的，否则无法访问如果是同一域下，但是子域名不同，那么涉及到的js，html文件都加上一句。

document.domain = [这里填写你的域名]document.getElementByIdx_x('iframeid').contentWindow.document.getElementByIdx_x('someel ementid');window.opener 实际上就是通过window.open打开的窗体的父窗体。

比如在父窗体parentForm里面通过window.open("subForm.html"),那么在subform.html中window.opener就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。

如：1,window.opener.test(); ---调用父窗体中的test()方法2,如果window.opener存在,设置parentForm中stockBox的值。

if (window.opener && !window.opener.closed) {window.opener.document.parentForm.stockBox.value = symbol;}1>window.opener 的用法在一般的用法中，只是用来解决关闭窗口时不提示弹出窗口，而对它更深层的了解一般比较少。

其实window.opener是指调用window.open方法的窗口。

在工作中主要是用来解决部分提交的。

这种跨页操作对工作是非常有帮助的。

如果你在主窗口打开了一个页面，并且希望主窗口刷新就用这个，打开页面的window.opener 就相当于主窗口的window。

主窗口的刷新你可以用window.opener.location.reload()；如果你用虚拟的目录：如struts的*.do会提示你重试你可以改成这样window.opener.yourformname.submit()就好了2〉在应用中有这样一个情况，在A窗口中打开B窗口，在B窗口中操作完以后关闭B窗口，同时自动刷新A窗口function closeWin(){hasClosed = true;window.opener.location="javascript:reloadPage();";window.close();}function window.onbeforeunload(){if(!hasClosed){window.opener.location="javascript:reloadPage();";}}</script>上面的代码在关闭B窗口的时候会提示错误，说缺少Object,正确的代码如下：function closeWin(){hasClosed = true;window.opener.location="javascript:reloadPage();";window.close();}function window.onbeforeunload(){if(!hasClosed){//如果已经执行了closeWin方法，则不执行本方法window.opener.location="javascript:reloadPage();";}}</script>reloadPage方法如下:function reloadPage() {history.go(0);document.execCommand("refresh")document.location = document.location;document.location.reload();}PS:由于需要支持正常关闭和强制关闭窗口时能捕捉到事件，用了全局变量hasClosed==============================================补充，在父窗口是frame的时候在刷新父窗口的时候会出现问题:The page cannot be refreshed without resending the information.后修改如下:window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;不需要执行自带的reload()方法,注意，不要再画蛇添足加上这一句:window.opener.parent.document.frames.item('mainFrame').location.reload();=============================================================================== =========最后，为了同时支持刷新普通父窗口和frame父窗口，代码如下:function closeWin() {hasClosed = true;<%if(null != frame){%>window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;<%}else{%>window.opener.location = "javascript:reloadPage();";<%}%>//window.opener.top.mainFrame.location="javascript:reloadPage();";//self.opener.frames.mainFrame.location.reload(true);window.close();}function window.onbeforeunload(){if (!hasClosed) {<%if(null != frame){%>window.opener.parent.document.frames.item('mainFrame').location.href = window.opener.location.href;<%}else{%>window.opener.location = "javascript:reloadPage();";<%}%>window.opener = null;}}关于window.openerwindow.opener 的用法window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：window.opener.document.getElementByIdx_x("name").value = "输入的数据";对于javascrīpt中的window.opener没有很好的理解。

为什么框架中不能使用，弹出窗口的父窗口不能在框架里面的某个页面呢？那怎样通过弹出窗口操作框架中的父窗口呢？opener.parent.frames['frameName'].document.all.input1.value 试试这个：）正确使用window.open返回对象的opener众所周知JavaScript中:var win = window.open(url,windowName,...); 的使用,而win.opener则是指向父窗口的引用然而,有种情况却比较特别,假如有两个窗口window1和window2按下列步骤执行:var win = window.open(url,windowName,...);// (window1)var win = window.open(url,windowName,...);//(window2)其中先后这两次打开的子窗口的windowName一样此时你会发现在window2中的win.opener却不是指向window2的,却是指向window1.如果你想在子窗口关闭父窗口的话,就不正确了,因此可以修改上面的执行方法为:var win = window.open(url,windowName,...);? (window1)win.opener = window;var win = window.open(url,windowName,...);? (window2)win.opener = window;只有这样修改才OK通过window.showModalDialog或者.showModelessDialog弹出的页面这种情况需要两个步骤：1 在父窗口.showModalDialog或.showModelessDialog方法的第二个参数传递window对象比如: window.showModelessDialog('a.htm',window);2 在a.htm中就可以通过window.dialogArguments获取该参数比如: window.dialogArguments.fun1();PS:子窗口可以通过设置window.returnValue设置页面返回值比如: window.returnValue=’OK’;window.close();strRtn=window.showModalDialog(......)这时,strRtn='ok'页面中实现：父页面function reloadPage() {document.form1.submit();}弹出页面调用closeWin();function closeWin(){hasClosed = true;window.opener.location="javascript:reloadPage();";window.opener=null; window.close();}。