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 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
Vue表单实例代码
Sep 05 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
JavaScript实现百度搜索框效果
Mar 26 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
原生js实现购物车
2020/09/23 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[03:19]2016国际邀请赛中国区预选赛第四日TOP10镜头集锦
2016/07/01 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
洗发露广告词
2014/03/14 职场文书
班级旅游计划书
2014/05/03 职场文书
python某漫画app逆向
2021/03/31 Python
javaScript Array api梳理
2021/03/31 Javascript
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Android 中的类文件和类加载器详情
2022/06/05 Java/Android