javascript_调用父窗口（父页面）的方法

最新推荐文章于 2023-10-03 16:02:21 发布
最新推荐文章于 2023-10-03 16:02:21 发布
阅读量407 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mikyz/article/details/69400150
版权

via: http://www.php100.com/html/webkaifa/javascript/2009/0213/1658.html

 

window.parent与window.opener的区别 javascript调用主窗口方法

1：   window.parent 是iframe页面调用父页面对象

举例:

a.html

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中写

 

Html代码 

<script type="text/javascript">   

    var _parentWin = window.parent ;    

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

</script>  

 

实例地址：  实例/a.html

源码：

1.a.html

Html代码 

<html>   

<head>   

    <title>主页面</title>   

    <script>   

        /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */    

        var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";    

        function parentInvokeIFrame()    

        {    

                var iframeTest = document.frames["iframeTest"]; //使用document.getElementById("iframeTest");同样可以    

                alert(iframeTest.document.body.innerHTML);    

                alert(iframeTest.iFrameVair);    

        }    

    </script>   

</head>   

<body>   

<form name="form1" id="form1">   

    <input type="text" name="username" id="username"/>   

    <input type = "button" value = "父窗口调用IFrame子窗口中的内容" onclick = 'parentInvokeIFrame()'/>   

</form>   

<iframe src="b.html" width = '100%' id = 'iframeTest'></iframe>   

</body>   

</html>  

 

1.b.html

Html代码 

<html>   

     <head>   

         <title></title>   

         <script type="text/javascript">   

            /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */    

         var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";    

             

         function UpdateParent()    

         {    

             var _parentWin = window.parent ;    

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

         }    

             

         function childInvokeParent()    

         {    

                var parentVairous = window.parent.window.parentVairous;    

                alert(parentVairous);       

         }    

       </script>   

    </head>   

<body>   

     <form name="form1" id="form1">   

         <p>  </p>   

         <p align="center">   

            <input type = "button"     

                   name = "button"     

                   id = "button"     

                   value = "更新主页面的UserName内容"     

                   onclick = "UpdateParent()">   

            <input type = "button"   

                         name = "button2"   

                         id = "button2"   

                         value = "测试IFrame子窗口调用父窗口的全局变量"   

                         onclick = "childInvokeParent();"/>   

         </p>   

         <p>  </p>   

     </form>   

</body>   

</html>    

ps:不能跨域获取，例如iframe的src是'http://www.xxx.ccc/'就不可以

2：   window.opener 是window.open 打开的子页面调用父页面对象

实例地址：  实例/a.html

源码：

2.a.html

Html代码 

<html>   

<head>   

     <title>主页面</title>   

     <script type="text/javascript">   

     /** 为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量 */      

     var parentVairous = "为测试IFrame子窗口调用父窗口的全局变量而添加的测试变量";     

         

     /**     

      *  因为不同于IFrame（IFrame有id,window.open()与IFrame的父子窗口的模式不同）,    

      *  所以当是通过window.open()方法打开一个新窗口使, 必须有一个新窗口的对象     

      *  当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常    

      */    

     var OpenWindow;    

         

     function openSubWin()    

     {    

         OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');    

     }    

     function parentInvokeChild()      

     {      

         if(OpenWindow)//当然必须先让子窗口弹出来, 才能调用子窗口中的变量, 否则抛出异常             

         {    

               alert(OpenWindow.iFrameVair);    

         }    

     }     

     </script>   

</head>   

<body>   

    <form name="form1" id="form1">   

        <input type="text" name="username" id="username"/>   

        <input type="button" value="弹出子页面" onclick = "openSubWin()">   

        <input type="button" value="测试调用弹出窗口中的全局变量" onclick = "parentInvokeChild()">   

    </form>   

</body>   

</html>  

 

2.b.html 

Html代码 

<html>   

    <head>   

        <title>子页面</title>   

        <script type="text/javascript">   

         /** 为测试父窗体调用IFrame子窗体的全局函数而添加的子窗口全局函数 */      

         var iFrameVair = "测试父窗体调用IFrame子窗体的全局函数";    

         function UpdateParent()    

         {    

              var _parentWin = window.opener;    

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

         }    

         function childInvokeParent()      

         {      

              var parentVairous = window.opener.window.parentVairous;      

              alert(parentVairous);         

         }    

        </script>   

    </head>   

<body>   

<form name="form1" id="form1">   

<p>  </p>   

<p align="center">   

    <input type="button"     

               onclick = "UpdateParent();"     

               name="button"     

               id="button"     

               value="更新主页面的UserName内容">   

    <input type = "button"      

           name = "button2"      

           id = "button2"      

           value = "测试IFrame子窗口调用父窗口的全局变量"      

           onclick = "childInvokeParent();"/>      

</p>   

<p>  </p>   

</form>   

</body>  

 经过hanjs的提醒，确实需要注意的是，模态窗口的子窗口是没有办法修改父窗口页面中的任何内容的。

例如修改：OpenWindow = window.open('b.html', 'newwindow', 'height=1024, width=1300, top=0, left=0, toolbar=no, menubar=yes, scrollbars=yes,resizable=yes,location=no, status=no');

为：OpenWindow = window.showModalDialog("b.html",'newwindow',"dialogHeight:100px,center:yes,resizable:no,status:no");

在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容

mikyz
关注
JS子窗口调用父窗口
12-24
JS子窗口调用父窗口
javascript调用父窗口（父页面）的方法[摘自网上]
weixin_30892037的博客
09-28 94
window.parent与window.opener的区别 javascript调用主窗口方法1： window.parent 是iframe页面调用父页面对象举例:a.html Html代码 <html><head><title>父页面</title></head><body>...
javascript调用父窗口（父页面）的方法
技术交流
10-21 304
[b][size=medium]javascript调用父窗口（父页面）的方法[/size][/b] window.parent与window.opener的区别 javascript调用主窗口方法 1： window.parent 是iframe页面调用父页面对象 举例: a.html Html代码 父页面 ...
layer.open关闭父窗口 以及调用父页面的方法
10-18
本篇文章将详细讲解如何使用 layer.open 创建弹窗，并在弹窗中关闭父窗口以及调用父页面的方法。 首先，layer.open 是 layer.js 提供的一个核心方法，用于打开一个新的弹窗。其基本语法如下： ```javascript layer...
JavaScript子窗口调用父窗口变量和函数的方法
10-23
总结一下，JavaScript子窗口调用父窗口变量和函数的方法主要有以下几点： 1. 使用`opener`对象来访问父窗口的变量和函数，如`opener.parentPara`和`opener.parentFunction()`。 2. 对于`iframe`，可以通过`frame1....
js 调用父窗口的具体实现代码
10-27
在实际开发中，除了上述直接调用父窗口的方法外，还可以利用`postMessage`和`message`事件进行异步通信，这种方式更加安全且兼容性更好。同时，考虑到不同浏览器的限制和安全问题，使用这些技术时应确保适当的权限...
jquery、js调用iframe父窗口与子窗口元素的方法整理
10-25
以上就是jQuery和JavaScript调用iframe父窗口与子窗口元素的方法。在实际应用中，要注意跨域问题，如果父页面和iframe的源不同，它们之间的交互可能会受到浏览器同源策略的限制。此外，确保正确引用jQuery库，并且在...
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值
08-10
在EasyUI中，我们可能会遇到需要在弹出窗口（子页面）与父页面之间进行数据传递或调用父页面方法的需求。下面将详细讲解这个过程。 首先，让我们理解标题中的“弹出window窗口传值”。在EasyUI中，创建一个弹出窗口...
js中iframe调用父页面的方法
01-19
本文实例讲述了js中iframe调用父页面的方法。分享给大家供大家参考。具体实现方法如下： 子页面调用父页面的方法在js中很容易实现。我们只需要在主页面加个函数，然后在子页面通过window.parent.方法()即可实现了 比如调用a()函数，就写成： 代码如下:window.parent.a(); 但是我在chrome浏览器下却发现此方法无效了 代码如下://在父页面中调用该函数 [removed] function dey() { var cards_frame=document.frames(“card-iframe”);    //card-iframe为iframe的名字    
js调用父框架函数与弹窗调用父页面函数的简单方法
11-29
调用父级中的 aaa的函数 子页面中: onclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert(‘bbbbb'); } frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面。 window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面. 可以这样 window.frames[0].document.getElementById(‘xx'); 可以这样 window.f
在iframe中调用js父页面和子页面方法
08-08
NULL 博文链接：https://747017186.iteye.com/blog/1985110
父子页面相互调用总结
Kingstarforever的专栏
03-26 739
 2010-03-26父子页面相互调用总结 文章分类:Web前端父子页面相互调用是一个在开发中经常遇到的问题，但是没有找到过比较全面的文章介绍。在此总结下来，供大家参考。四种方式        一般情况下，我们可以使用iframe、window的open、showModalDialog、showModelessDialog方法这四种方式打开一个子窗口。(showMo
jsp中iframe所包含的页面调用父页面的function方法
weixin_30824277的博客
10-20 121
a.jsp中写了注册的Ext窗体loginWindow，也用iframe包含了另一个b.jsp，当在b.jsp中也有点击注册的链接，这时需要用到调用a.jsp中的loginWindow，因为如果你重新将loginWindow再次写在b.jsp中的话，弹出来的窗体是在b.jsp页面的中部而不是在a.jsp的中部，所以这时就可以这样： onclick="parentRegiSter()" ...
javascript调用父页面的方法
iteye_5082的博客
11-03 166
1,iframe页面调用父页面JS方法 &lt;script type="text/javascript"&gt;     //getData(1)为父页面的JS方法      window.parent.getData(1);     //为父页面“username”文本框赋值     window.parent.form1.username.value = "xxxx" &lt;/script...
JS 在open打开的窗口中调用父页面JS方法
如斯，如己
10-22 1560
window.opener.function(Object);
JavaScript调用父窗口方法的实现方式
最新发布
2301_79325657的博客
10-03 629
这些方法可根据具体场景选择使用。使用window.parent对象适用于嵌套的iframe情况，使用window.opener对象适用于弹出窗口情况，而postMessage方法则是一种通用的跨窗口通信方式，适用于不同窗口之间的交互。在JavaScript编程中，有时候我们需要在一个嵌套的iframe或弹出窗口中调用父窗口（即包含iframe或弹出窗口的窗口）的方法。这种情况下，我们可以使用一些方法来实现这样的交互。希望以上解答能够帮助到你。
JavaScript刷新父页面方法总结
"这篇文章主要介绍了如何使用JavaScript在子页面中刷新父页面的方法，包括通过`window.opener`属性以及`dialogArguments`...这种方法常用于子窗口需要更新父窗口状态的情况，例如在弹出窗口中进行操作后返回主页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值