一、前言

@H_502_3@

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

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

第二：父窗口打开一个设置用户权限的iframe子窗口，首先打开这个子窗口会全部加载数据库表中所有的存在的权限，然后子窗口需要把加载的权限信息拼接html Append到一个ID为

调用子窗口加载所有权限信息的后，没有找到表格元素，因为子页面还没有完全加载完成，这种情况处理在这里也介绍了，给iframe注册一个onload事件，等加载完成后再去调用追加的方法。@H_502_3@

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

二、iframe子父窗口方法 调用

@H_502_3@

2.1语法使用@H_502_3@

1、父窗口嵌入iframe@H_502_3@

代码如下:

@H_502_3@

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

代码如下:

@H_502_3@

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

代码如下:

@H_502_3@

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

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

2.2语法代码@H_502_3@

Father.html

@H_502_3@

我是父窗口内容

FChild.html

@H_502_3@

内容

@H_301_85@

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

@H_502_3@

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

用户角色" class="easyui-window" closed="true" collapsible="false" minimizable="false" maximizable="false" style="width: 140px; height: 250px; padding: 5px;">

四、总结几个关键点吧

@H_502_3@

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

以上内容就是本文中介绍iframe中子父类窗口调用JS的方法及注意事项，希望大家喜欢。@H_502_3@ 原文链接：https://www.f2er.com/js/52704.html

iframe调用父窗口js iframe调用父页面js js调用iframe中的方法

上一篇：javascript中SetInterval与setTime 下一篇：js中javascript:void(0) 真正含义

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14