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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
分享jQuery插件的学习笔记
Jan 14 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序实现的一键拨号功能示例
Apr 24 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue props default Array或是Object的正确写法说明
Jul 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
php 分页原理详解
2009/08/21 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
Web开发之JavaScript
2012/03/29 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
Angularjs的ng-repeat中去除重复数据的方法
2016/08/05 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
jQuery Layer弹出层传值到父页面的实现代码
2017/08/17 jQuery
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
详解python算法之冒泡排序
2019/03/05 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
论文诚信承诺书
2014/05/23 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
花田少年史观后感
2015/06/16 职场文书
公司酒会主持词
2015/07/02 职场文书