JS中FRAME的操作问题实例分析
更新时间：2014年10月21日 09:50:21 投稿：shichen2014
这篇文章主要介绍了JS中FRAME的操作问题实例分析,详细讲述了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程序设计有所帮助。
相关文章
最近在做私服发布站时，客户要求实现广告随机排序，而且要求在html页面实现，也就是说必须使用javascript来完成了。2010-11-11
JavaScript使用Base64编码和Blob对象加密图像url地址
有时候会看到一些网站的图片src中是blob:http://example.com/7c672acb-375c-4a26-9af9-99cb4c77f04d,这样的图片加载怎么实现呢？本文讲解在浏览器中JavaScript使用解析Base64编码和Blob对象技术来实现,下面是实现的步骤和相应的示例代码,2023-12-12
这篇文章主要为大家详细介绍了pageGroup.js实现分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
JavaScript支持其用于执行根据不同的条件不同的操作条件语句,下面这篇文章主要给大家介绍了关于如何在JavaScript中更好的使用条件判断的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Webpack简单实现两个自定义插件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-04-04
大家都知道Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。下面这篇文章主要给大家介绍了在JS中利用swiper实现3d翻转幻灯片的相关资料，文中给出了完整的示例代码供大家参考学习，需要的朋友可以参考借鉴，下面来一起看看吧。2017-08-08
这篇文章主要介绍了使用js实现让某个动作延迟几秒执行的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
JavaScript使用readAsDataURL读取图像文件
这篇文章主要为大家详细介绍了JavaScript使用readAsDataURL读取图像文件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
今天小编就为大家分享一篇layui异步加载table表中某一列数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
详解微信小程序开发—你期待的分享功能来了，微信小程序序新增5大功能
微信小程序在12月21日发布了新版本的开发工具，并在官网公布新增分享、模板消息、客服消息、扫一扫、带参数二维码功能。2016-12-12
最新评论