window.parent与window.opener的区别

最新推荐文章于 2022-09-15 09:42:52 发布
原创 最新推荐文章于 2022-09-15 09:42:52 发布 · 97 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用JavaScript在不同窗口间进行交互，重点讲解了window.parent与window.opener的区别及应用场景。前者用于iframe页面调用父页面方法，后者用于window.open打开的子页面调用父页面方法。
window.parent与window.opener的区别 javascript调用主窗口方法
2007-11-30 13:42


在这里总结一下，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 ;
_parentWin.form1.username.value = "xxxx" ;
</script>


实例地址：   http://www.cnspry.cn/blog/attachments/window.parent实例/a.html
源码：
1.a
<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>
1.b
<html>
<head><title></title>
<script type="text/javascript">
function UpdateParent()
{

var _parentWin = window.parent ;

_parentWin.form1.username.value = "xxxx" ;

}
</script>
</head>
<body>
<form name="form1" id="form1">
<p>&nbsp; </p>
<p align="center">
    <input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
</p>
<p>&nbsp; </p>
</form>
</body>
</html>
2：   window.opener 是window.open 打开的子页面调用父页面对象

实例地址：   http://www.cnspry.cn/blog/attachments/window.opener实例/a.html
源码：
2.a
<html>
<head>
<title>主页面</title>
<script type="text/javascript">
function openSubWin()
{
var _width = 300 ;

var _height = 200 ;
var _left = (screen.width - _width) / 2 ;
  
var _top = (screen.height - _height) / 2 ;
  
window.open("b.html",null,
"height=" + _height + ",width=" + _width + ",status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=" + _left + ",top=" + _top);

}
</script>
</head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
<input type="button" value="弹出子页面" onClick="openSubWin();">
</form>
</body>
</html>

2.b
<html>
<head>
<title>子页面</title>
<script type="text/javascript">
function UpdateParent()
{

var _parentWin = window.opener ;

_parentWin.form1.username.value = "xxxx" ;

}
</script>
</head>
<body>
<form name="form1" id="form1">
<p>&nbsp; </p>
<p align="center">
    <input type="button" name="button" id="button" value="更新主页面的UserName内容" onClick="UpdateParent();">
</p>
<p>&nbsp; </p>
</form>

</body>
</html>

<%
Call FunMsg("upload_pic.asp?Send=OK&FileName="&SFileName&"&FileName_small="&Sfilename_small,"文件上传成功！")
   
Dim Send,StrBody
Send=Request.QueryString("Send")
FileName=Request.QueryString("FileName")
FileName_small=request.QueryString("FileName_small")
if Send="OK" And FileName<>"" And FileName_small<>"" then
StrBody="onLoad=setOpener('"&FileName&"','"&FileName_small&"')"
end if

<script type="text/javascript">
function setOpener(index,index_small) {
   window.opener.Images(index,index_small);
   window.close();
}
</script>


<body leftmargin="0" topmargin="0" <%=StrBody%>>

<script type="text/javascript">
function Images(catName,catName_small){
document.form.P_Pic.value=catName;
document.form.P_smallPic.value=catName_small;
document.form.P_PicB.src="../info/Pic/"+catName;
}
</script>


<input name="P_Pic" type="hidden" id="P_Pic" Value="<%=pRs("P_Pic")%>">
<input name="P_smallPic" type="hidden" id="P_smallPic" Value="<%=pRs("P_smallPic")%>">

%>

window.parent与window.openner区别介绍
10-28
1. 应用场景：`window.parent` 适用于处理iframe嵌套，而`window.opener` 用于新窗口与创建它的窗口之间的交互。 2. 直接关系：`window.parent` 直接指向当前窗口的父窗口，而`window.opener` 指向打开当前窗口的...
javascript window.opener的用法分析
01-19
window.opener 的用法 window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的... opener.parent
调用window.parent.function()的时候很容易犯的一个小错误
learntogiveup的博客
06-07 2610
调用window.parent.function()的时候很容易犯的一个小错误 首先，这里要注意： 1.我们调用的是window中的方法，必须要在我们能够搜索到的作用域（全局作用域）中找到， 2.如果找不到 就会报错 错误如下 window.parent.function is not a function 实例1：（得出正确的结果） 1.我们在父页面创建一个函数 2.第二步 我们在子页面调用一下 3，结果 发现 能够成功打印出window 我们再来看第二种情况 1.同样的执行第一步 但 我们把
通过window.open使用url下载文件和download属性
孜然卷的博客
09-15 7058
JavaScript通过window.open（url）下载文件修改文件名
window.parent.xxx is not a function子页面调用父页面方法报错
sherlyxoxo的博客
06-22 5244
window.parent.xxx is not a function
window.open() 下载文件问题分析
fxinn的博客
03-18 1万+
首先这种模式适用于后端返回文件流的模式。 window.open() 打开新的链接，这个链接访问到文件地址之后，就开始下载。其实同理 用a链接下载也是可以的，a链接添加 download 属性，然后herf链接是要下载的文件 原文参考：https://blog.csdn.net/weixin_46074961/article/details/105677732 https://blog.csdn.net/qq_38555490/article/details/99697993 ...
f (isOpenedByParent()) { setTimeout(() => { if (window.opener && !window.opener.closed) { window.opener.postMessage('closeIframe', '*') // 推荐指定域名 } else if (window.parent && window.parent !== window) { window.parent.postMessage('closeIframe', '*') debugger } else { console.warn('无法发送消息：window.opener 不存在或已关闭') } }, 1000) }那我现在需要这样写吗
最新发布
11-19
用户给出的代码片段中，他们使用了一个函数isOpenedByParent()，并且在setTimeout中再次检查了window.opener和window.parent的状态。用户想知道是否应该这样写。 首先，我需要理解用户的需求。他们希望确保子页面...
window.opener和window.parent
05-25
`window.opener` 和 `window.parent` 都是 JavaScript 中的 window 对象的属性。 - `window.opener` 属性引用打开当前窗口的窗口（即父窗口）的 window 对象。如果当前窗口是由其他窗口通过 JavaScript 打开的，则...
window.parentWindow.postMessage是对的吗 还是window.parent.postMessage是对的？
08-22
根据提供的引用，我们需要确定使用window.parentWindow.postMessage还是window.parent.postMessage。 首先，查看引用： 引用[1]提到：otherWindow.postMessage(message, targetOrigin, [transfer]); 其中other...
window.parent.xxx is not a function
小猿备忘录
12-09 8739
报错信息： VM22801:319 Uncaught TypeError: window.parent.productAdvancedQuery1 is not a function at Object.click (eval at <anonymous> (jquery.min.js:2), <anonymous>:319:35) at HTMLDi...
js调用父窗口（父页面）的方法
yunliupan的专栏
11-29 5310
window.parent与window.opener的区别 javascript调用主窗口方法 1：   window.parent 是iframe页面调用父页面对象 举例: a.html Html代码   html>       head>title>父页面title>head>   body>       form name="form1"
Js中的window.parent ,window.top,window.self 详解
热门推荐
Mr. David 专栏
12-01 10万+
在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。window.self功能：是对当前窗口自身的引用。它和window属性是等价的。语法：window.self注：window、self、window.self是等价的。window.top功能：返回顶层窗口，即浏览器窗口。语法：window.top注：如果窗口本身就是顶层窗口，top属
当window.parent.fun();子页面调用父页面方法不起作用时
liona_koukou的博客
12-21 9711
当window.parent.fun();子页面调用父页面方法不起作用时 请果断试一下top.window.parent.fun(); 有时间想仔细整理一下父子页面的传值和调用function的方法_(:зゝ∠)_
在子窗口中操作父窗口使用window.parent
ICode联盟
10-14 1万+
window.parent.Location.href; window.parent.Location.reload(); window.parent.frames['iframe1name'].location.href='page2.aspx?nodeid=100'"; window.parent.HideThisDiv(); window.parent.document; wind
layui父页面与子页面交互(报错:window.parent.$ is not a function)
CaiXinXing的优快云博客
05-07 7659
当layer以iframe层的方式弹出新的窗口（子页面），如何在子页面中访问父页面的元素和函数。 1、访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2、访问父页面方法 var parentMethodValue=parent.getMethodValue();//访问父页面方法 3、如何关闭弹出的子页面窗口 var...
window.parent说明
weixin_33937913的博客
04-14 549
window.parent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身.可以用这一点特性来判断这个窗口是否是顶层窗口。如： function is_toplevel(w){        return (w.parent == w); }...
window.open下载文件
weixin_62042254的博客
12-09 4695
window.open(`/api/oceanengine/oceanAdModelReq/download?${tokenHeader}=${getToken()}&ctNumber=${row.ctNumber}&downloadStatus=${'Y'}`)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值