javascript 在子页面调用父页面的方法

最新推荐文章于 2023-06-25 09:13:17 发布
最新推荐文章于 2023-06-25 09:13:17 发布
阅读量2.6k 收藏 1
点赞数
文章标签： javascript iframe button 测试 input function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mark_2000/article/details/5379138
版权

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> 

实例地址：  http://www.cnspry.cn/blog/attachments/window.parent 实例/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 打开的子页面调用父页面对象
实例地址：  http://www.cnspry.cn/blog/attachments/window.opener 实例/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" ;  //username是父页面的参数，或者写为document.getElementId("username")
         } 
         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");
在子窗口中当希望修改父窗口中的内容时，会弹出“某某”为空或不是对象的错误，而这里的“某某”就是你想修改的父窗口中的内容。

mark_2000
关注
JS子窗口调用父窗口
12-24
JS子窗口调用父窗口
easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值
08-10
假设在父页面上有一个名为`updateParentData`的函数，可以在子页面中这样调用： ```javascript parent.updateParentData('子页面传递的数据'); ``` 接着，我们讨论“子页面给父页面赋值”。当子页面完成了某些操作...
javascript调用父窗口（父页面）的方法
03-08 481
 window.parent与window.opener的区别 javascript调用主窗口方法1：   window.parent 是iframe页面调用父页面对象举例:a.htmlHtml代码        父页面                                            如果我们需要在b.htm中要对a.htm中的username文本框赋值，就如很多上传
js中子页面父页面方法 变量相互调用（转）
weixin_34413065的博客
08-14 566
 原文：https://www.cnblogs.com/huangshuqiang/p/5734358.html   （1）子页面调用父页面的方法或者变量： window.parent.方法()或者变量名window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取...
使用JS实现子页面调用父页面的函数
kuanglian0的博客
06-21 6628
使用JS实现子页面调用父页面的函数
js中父子页面方法、变量互调
qq_41082640的博客
03-09 1194
（1）子页面调用父页面的方法或者变量：方法 ： window.parent.aa();//调取aa函数变量 ： 子页面中得到id为aaa的文本框的值window.parent.$("#aaa").val(); //jquerywindow.parent.getElementById("aaa").value;...
JavaScript子窗口调用父窗口变量和函数的方法
10-23
在这个`iframe`子页面中，我们可以设置一些变量和函数，并通过父窗口的JavaScript代码来调用它们。例如，可以创建一个`childPara`变量和`childFunction`函数，然后在父窗口的JavaScript中通过`frame1.window....
iframe子父页面调用js函数示例
12-12
本篇文章将详细讲解如何在`iframe`子页面调用父页面的JS函数以及反之的操作。 ### 1. 子页面调用父页面的JS函数 在`iframe`子页面中，要调用父页面的JavaScript函数，可以使用`window.parent`对象来引用父窗口。...
在iframe中调用js父页面和子页面方法
08-08
总结，`iframe`中的JavaScript交互涉及到页面间的通信，无论是父页面调用子页面还是子页面调用父页面，都需要理解`window`对象、同源策略以及跨域通信机制。正确使用这些技术，可以在多页面应用中实现更复杂的功能...
子页面调用父页面方法---js方式
numbgui的专栏
07-25 649
子页面通过JS的方式调用父页面
浅谈js中子页面父页面方法 变量相互调用
12-12
（1）子页面调用父页面的方法或者变量： window.parent.方法()或者变量名 window.parent相当于定位到父页面  之后的操作和在父页面中写代码一样写 window.parent.aa();//调取aa函数 window.parent.bb;//调取bb变量 例如：想在子页面中得到id为aaa的文本框的值 window.parent.$("#aaa").val();//这种写法的前提是引用了jquery window.parent.getElementById("aaa").value; //js的写法 （2）父页面调取子页面 主要是通过contentWindow定位到
子页面调用父页面方法
fei0700的博客
06-11 666
window.parent.Test();
JAVASCRIPT之子窗口与父窗口的互调
netuser1937的博客
02-08 556
JAVASCRIPT之子窗口与父窗口的互调
子页面使用父页面的方法
最新发布
mkmmkkghhhhhhhh的博客
06-25 1624
一个场景，在子页面需要调用父页面的方法时，查了很多很多现有的方法，在子页面直接调用父页面的方法这种会有一些跨页面的问题，所以对于这个方法我进行优化。需要注意的是，由于同源策略的限制，子页面只能访问同源的父页面。否则，因为安全策略的限制，可能无法调用父页面的方法。相当于给父页面的根节点添加消息监听事件，子页面发送信息的时候，就触发相对应的事件。这样，子页面点击按钮时会发送一个消息给父页面，父页面接收到消息后触发相应的事件。下面我先介绍第一种方法，子页面直接调用父页面的方法。属性访问父页面中的方法。
子页面执行父页面Javascript方法
云上人间钦自赏
10-26 879
子页面： Response.Write("alert('提交成功！');window.parent.CallBack('" + model.ID + "','" + ishandle + "');window.parent.ymPrompt.doHandler('error',true);"); 父页面： function CallBack(tp, ishand) {
JS子窗口调用父窗口的方法
weixin_30624825的博客
08-07 121
有两种情况： 一，框架（iframe）形式，这时用到是window.parent，详情如下： 1，1.html代表的是父窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
html子页面获取父页面js方法
ChiG分享生活，分享知识
05-16 3919
1.最近在写项目有很多可以拿出来分享 html子页面获取父页面js方法 //window.parent.后面跟着父类js中的方法， window.parent.getLoginUser();
js子窗口调用父窗口的方法及传参
wangqiuchen_Study的专栏
04-29 518
方法1： 父窗口中： Function getUrl（url）{  Alert(url); } 子窗口： Var url = window.location.href; Function getURL（url）{ Parent. getUrl(url); } 方法2： 用window.open()打开的子页面    window.opener.LoadTableData()
jQuery子页面调用父页面的js方法
06-01
在子页面中，可以使用如下代码调用父页面的JavaScript方法： ```javascript // 调用父页面的方法 parent.methodName(); ``` 其中，`methodName`是父页面中的JavaScript方法名。通过`parent`对象，可以访问到父页面中的JavaScript方法。 如果需要传递参数给父页面的JavaScript方法，可以在调用方法时传入参数，： ```javascript // 调用父页面的方法，并传递参数 parent.methodName(param1, param, ...); ``` 在父页面中，可以定义一个JavaScript方法，用于接收来自子页面的调用，例如： ```javascript // 定义方法，用于接收子页面的调用 function methodName(param1, param2, ...) { // 处理接收到的参数 } ``` 通过这种方式，就可以在子页面中调用父页面的JavaScript方法，并传递参数了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值