JS中FRAME的操作问题实例分析


Posted in Javascript onOctober 21, 2014

本文实例探讨了JS中FRAME的操作问题,分享给大家供大家参考。具体分析如下:

JS中FRAME的操作问题实例分析

以上图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取。

一、  首先从 父(frameABC)------->子(frameA,frameB,frameC)

① 访问变量名name

假如在frameABC中操作那么可以:

window.frames("frameA").contentWindow.name

或者

document.getElementById("frameA").contentWindow.name

或者

jquery:window.$("#frameA")[0].contentWindow.name

② 访问方法func

假如在frameABC中操作那么可以:            

window.frames("frameA").contentWindow.func();

或者

document.getElementById("frameA").contentWindow.func();

或者

jquery:window.$("#frameA")[0].contentWindow.func();

③ 访问子页面元素:username

假如在frameABC中操作那么可以:            

window.frames("frameA").contentWindow.document.getElementById("username");

或者

document.getElementById("frameA").contentWindow.document.getElementById("username");

或者

jquery:window.$("#frameA")[0].contentWindow.$("#username");

二、 然后从子(frameA,frameB,frameC)------------>到父(frameABC)

① 访问父页面变量name,假如在frameA中(子页面)操作那么可以:

window.parent.name;

② 访问父页面方法func,假如在frameA中(子页面)操作那么可以:

window.parent.func();

③ 访问父页面元素username,假如在frameA中(子页面)操作那么可以:

window.parent.$("#username")

或者:

window.parent.document.getElementById("username");

总结:

frame只是一个页面框架,要想操作子frame中的元素都需要首先进入到window或者contentWindow。从子页面访问父页面,需要计算好父子关系,分几层结构。

在网上看了其他帖子,谈到有关页面加载的问题。大概意思是在子frame页面还没加载出来就进行元素操作,会引起bug,感兴趣的朋友可以针对性的测试一下,相信会有新的收获!

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
JS的get和set使用示例
Feb 20 Javascript
JavaScript自定义等待wait函数实例分析
Mar 23 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
js匿名函数使用&传参(实例)
Sep 08 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
VUE脚手架具体使用方法
May 20 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 #Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 #Javascript
利用jquery操作Radio方法小结
Oct 20 #Javascript
利用a标签自动解析URL分析网址实例
Oct 20 #Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 #Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 #Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 #Javascript
You might like
PHP 超链接 抓取实现代码
2009/06/29 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php四种定界符详解
2017/02/16 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python3实现并发检验代理池地址的方法
2016/09/18 Python
django实现支付宝支付实例讲解
2019/10/17 Python
numpy中三维数组中加入元素后的位置详解
2019/11/28 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
RetroStage德国:复古服装
2019/02/03 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
销售总监岗位职责
2014/01/04 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python