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

本文实例探讨了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程序设计有所帮助。

时间: 2024-11-29 15:05:23

JS中FRAME的操作问题实例分析_javascript技巧的相关文章

JS遍历数组及打印数组实例分析_javascript技巧

本文实例分析了JS遍历数组及打印数组的方法.分享给大家供大家参考,具体如下: 一直头痛与JS的打印数组,也没看到什么比较好的方法,写一个简单的方法备用. // 遍历数组 var dd = { 'a' : '111111', 'b' : '222222', 'c' : '333333' } dd['d'] = ['444444','55555555']; // 遍历数组 function scan_array(arr) { for(var key in arr) { // 这个是关键 if(typ

javascript与jquery中的this关键字用法实例分析_javascript技巧

本文实例分析了javascript与jquery中的this关键字用法.分享给大家供大家参考,具体如下: this 表示当前的对象,这个当前对象可以是表单,<p>等任何元素 1.javascript中this的用法: JS部分: <script type="text/javascript"> function chimg(obj){ obj.src="./images/2.jpg"; } </script> HTML部分: 复制代

js中setTimeout()与clearTimeout()用法实例浅析_javascript技巧

本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip

js中hash和ico的关联分析_javascript技巧

本文实例分析了js中hash和ico的一些关联.分享给大家供大家参考.具体如下: 近期测试提出一个bug,说某几个页面中的ico不显示,于是针对此问题排查原因. 首先,确保页面中的link已引入favicon.ico.经查看,发现是js中的location.hash导致了ico不显示.原因是在ico未加载完毕时设置了location.hash从而导致ico不显示. location.hash在项目中经常用到,用于url定位,例如http://h.liepin.com/#job-manage中的"

JS长整型精度问题实例分析_javascript技巧

本文实例分析了一个JS长整型精度问题.分享给大家供大家参考.具体分析如下: 问题描述: 后台有一个脚本功能,可编写脚本动态调用Java代码 复制代码 代码如下: importClass(com.ztgame.center.controller.api,P360ApiController);  var roleId = 10214734953631045;  p360ApiController.notice(roleId, 4); 脚本执行成功,但运行结果与设定不一样,此人没有收到邮件 查看日志 

js多个物体运动功能实例分析_javascript技巧

本文实例分析了js实现的多个物体运动功能.分享给大家供大家参考,具体如下: 与单个的区别:得知道哪个在动,所以运动函数需要两个参数,出了目标iTarget之外,还要obj.另外需要多个计数器,否则当一个还没运动完就移入另一个物体会发生卡壳 window.onload=function(){ var aDiv=document.getElementsByTagName("div"); var timer=null; var i; for(i=0;i<aDiv.length;i++)

js上传图片及预览功能实例分析_javascript技巧

本文实例讲述了js上传图片及预览功能.分享给大家供大家参考.具体分析如下: 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt="" /> <input type="file" /> function DisplayImage(fileTag,imgTagId){ var allowExtention=".

JS自定义选项卡函数及用法实例分析_javascript技巧

本文实例讲述了JS自定义选项卡函数及用法.分享给大家供大家参考.具体如下: 这里分享一个JS选项卡函数附带演示效果,选项卡函数参数调用说明: cmd:点击元素集合 con:显示容器集合 evt:触发事件 css:为当前点击元素的样式名称 index:为默认显示第几项的索引值 目前选项卡的样式还比较简洁和粗糙,想用的自己动动手美化一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zdy-tab-cha-fun-style-codes/

javascript中的float运算精度实例分析_javascript技巧

有人问到一个js问题: 复制代码 代码如下: var i = 0.07; var r = i*100; alert(r); 结果为什么是7.0000000000000001? 查了下资料,其实我们知道JavsScript中,变量在存储时并不区分number和float类型,而是统一按float存储.而javascript使用IEEE 754-2008 标准定义的64bit浮点格式存储number,按照IEEE 754的定义: http://en.wikipedia.org/wiki/IEEE_7