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 flash复制库类 Zero Clipboard
Jan 17 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
JS常用正则表达式总结
Nov 12 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
Mar 19 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
js+html5生成自动排列对话框实例
Oct 09 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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 观察者模式的实现代码
2013/05/10 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php实现短信发送代码
2015/07/05 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
在Vue中实现随hash改变响应菜单高亮
2020/03/09 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python图像处理之镜像实现方法
2015/05/30 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
人事任命书格式
2014/06/05 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang
Python获取字典中某个key的value
2022/04/13 Python