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浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JQuery魔力之$("tagName")与selector
Mar 05 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
JS实现前端缓存的方法
Sep 21 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
ant design charts 获取后端接口数据展示
May 25 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python工程师面试必备25条知识点
2018/01/17 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
详解python itertools功能
2020/02/07 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
毕业晚会主持词
2014/03/24 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
2014年话务员工作总结
2014/11/19 职场文书
大学生军训感言
2015/08/01 职场文书
2015年国培研修感言
2015/08/01 职场文书