iframe中子父类窗口调用JS的方法及注意事项


Posted in Javascript onAugust 25, 2015

一、前言

我页面用的是EasyUI的弹出窗口里面嵌入一个iframe。

第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function closeAddWindow()方法,让父窗口去关闭新增页面;

第二:父窗口打开一个设置用户权限的iframe子窗口,首先打开这个子窗口会全部加载数据库表中所有的存在的权限,然后子窗口需要把加载的权限信息拼接html  Append到一个ID为<table id="tb"></table>上,这里有个问题就是父窗口打开子窗口加载所有权限后根本无法把html 追加到id="tb"的表格上,这个原因很简单,因为父窗口调用子窗口加载所有权限信息的后,没有找到表格元素,因为子页面还没有完全加载完成,这种情况处理在这里也介绍了,给iframe注册一个onload事件,等加载完成后再去调用追加的方法。

好了,简单到这里,让我们瞧瞧更多的事例吧!!~~~~~~(*^__^*) 嘻嘻……

二、iframe子父窗口方法调用

2.1语法使用

1、父窗口嵌入iframe  

<iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>

2、父窗口调用子窗口方法  

myFrame.window.sonMethod();

3、子窗口调用父窗口方法   

 parent.fatherMethod();

4、兼容浏览器的iframe 加载完成方法

if (myFrame.attachEvent) {
      myFrame.attachEvent("onload", function () {
        alert("兼容IE加载的加载方法");
      });
    } else {
      myFrame.onload = function () {
        alert("兼容其他浏览器加载方法");
      };
    }

2.2语法代码

Father.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
</head>
<body>
  <div>我是父窗口内容</div>
  <div><input type="button" id="btnFather" value="调用子窗口方法" /></div>
  <br />
  <br />
  <br />
  <iframe id='myFrame' name="myFrame" src="FChild.html" width='100%' height='100%' frameborder='0'></iframe>
  <script type="text/javascript">
    document.getElementById("btnFather").onclick=function () {
      myFrame.window.sonMethod();
    }
    function fatherMethod() {
      alert("父窗口方法!");
    }
    if (myFrame.attachEvent) {
      myFrame.attachEvent("onload", function () {
        alert("兼容IE加载的加载方法");
      });
    } else {
      myFrame.onload = function () {
        alert("兼容其他浏览器加载方法");
      };
    }
  </script>
</body>
</html>

FChild.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
</head>
<body>
  <div style="border:1px solid red;"> 我是子窗体内容</div> 
   <div > <input type="button" id="btnSon" value="调用父窗口方法" /></div> 
   <script type="text/javascript">
     document.getElementById("btnSon").onclick = function () {
       parent.fatherMethod();
     }
     function sonMethod() {
       alert("子窗口方法!");
     }
  </script>
</body>
</html>

三、什么情况下使用到 myFrame.onload 或者 myFrame.attachEvent

这里使用的是easyui框架前端框架 

<div id="divRoleUsers" title="设置用户角色" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">
   </div>
 <div > <input type="button" id="btn" value="设置用户角色" /></div> 
 <script type="text/javascript">
 $("#btn").click(function () {
showSetUserRoleWindow();
});
    //设置用户角色
    function showSetUserRoleWindow() {
      var getSelections = $("#tt").datagrid("getSelections");
      if (getSelections.length > 1 || getSelections.length == 0) {
        $.messager.alert("错误提示", "请选中一行数据!", "error");
        return false;
      }
      var data = getSelections[0]; //获取选中的一行所有json的数据
      //if ($("#divRoleUsers #iframe").length != 0) {
      //  $("#divRoleUsers #iframe").remove();
      //}
      //  $('#divRoleUsers').append("<iframe id='iframe' name='iframe' src='RoleUsers_Update.aspx?UserID=" + data.UserID + "' width='100%' height='100%' frameborder='0'></iframe>");
      //错误做法!:上面src='RoleUsers_Update.aspx?UserID=" + data.UserID + "'   这里通过拼接参数iframe的src,
      //然后通过子窗口 parent.document.getElementById("iframe").getAttribute("src");//获取父窗体iframe的src 发现根据获取不到UserID的值,为null,也是因为加载顺序先后的问题,导致我要用给iframe注册onload事件后才能获取到我需要的结果
      //if (myframe.attachEvent) {
      //  myframe.attachEvent("onload", function () {
      //    alert("Local iframe is now loaded.");
      //    myframe.window.loadAllRole();
      //  });
      //} else {
      //  myframe.onload = function () {
      //    alert("Local iframe is now loaded.");
      //    myframe.window.loadAllRole();
      //  };
      //}
      if ($("#divRoleUsers #myframe").length != 0) {   //这一步是必须的!!!,因为不加这一句下面onload绑定事件只执行一次,我需要每次加载完iframe都调用一次子窗口的方法!
        $("#divRoleUsers #myframe").remove();
      }
      $('#divRoleUsers').append("<iframe id='myframe' name='myframe' src='RoleUsers_Update.aspx' width='100%' height='100%' frameborder='0'></iframe>");
      if (myframe.attachEvent) {
        myframe.attachEvent("onload", function () {
          myframe.window.loadAllRole(); 
          myframe.window.loadUserRole(data.UserID);
        });
      } else {
        myframe.onload = function () {
          myframe.window.loadAllRole();     //调用子窗口iframe里面的方法加载所有的角色checkbox
          myframe.window.loadUserRole(data.UserID);   //接着传递用户ID过去给子窗口的方法,给用户拥有的角色设置checkbox选中
        };
      }
      $('#divRoleUsers').window('open');
    }
  </script>

 四、总结几个关键点吧

父子窗口方法的调用,注意加载的先后顺序才能获取到想要的结果,遇到问题常用alter()测试或者浏览器的开发者工具监控

以上内容就是本文中介绍iframe中子父类窗口调用JS的方法及注意事项,希望大家喜欢。

Javascript 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
JavaScript设计模式之原型模式详情
Jun 21 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 #Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 #Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 #Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 #Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
jQuery实现图片左右滚动特效
Apr 20 #Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 #Javascript
You might like
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
显示程序执行时间php函数代码
2013/08/29 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php生成txt文件标题及内容的方法
2014/01/16 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
详解json在php中的应用
2018/09/30 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
2019/05/20 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
JavaScrip如果基于url实现图片下载
2020/07/03 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
行政助理岗位职责
2013/11/10 职场文书
安全环保标语
2014/06/09 职场文书
排查整治工作方案
2014/06/09 职场文书
党员转正大会主持词
2015/07/02 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript