开发者社区> 嗯哼9925> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

javascript对iframe的互操作浅析

简介:
+关注继续查看
[下面对iframe的所有操作都是在同一个域下进行,暂不考虑跨域调用]
iframe元素也就是文档中的文档,或者好像浮动的框架(frame)。关于iframe的操作一直是一个疑难点,网上有很多这方面的文章介绍。下面我结合自己的经验,整理一下笔记记录下来。
一、页面
三个页面:父页面和两个子页面,两个子页面在父页面的两个iframe里。
1、父页面MainForm.aspx
ContractedBlock.gifCode

2、子页面A

ContractedBlock.gifCode

3、子页面B

ContractedBlock.gifCode


二、操作
1、父页面操作子页面
这个毫无疑问要在父页面MainForm.aspx文件里实现。我们修改父页面的javascript函数iframeTest,看父页面如何获取和操作子页面元素的:

ContractedBlock.gifCode

 小结:
a、通过iframe对象所在页面的对象模型(通过document.getElementById("iframeId")获取),你可以访问iframe对象的属性,但不能访问其内容。
b、frames集合提供了对iframe内容的访问(通过document.frames["iframeName"]获取)。通常情况下我们都使用frames集合读写iframe内包含的元素。
c、如果只想改变iframe的src或者border, scrolling等attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到document.getElementById方法.
d、要想使用iframe内的函数或dom元素(比如想得到iframe的document.body的内容),变量就必须通过frames集合.因为它取的是一个完整的DOM模型,而通过id获取的方法只是取出了一个object而已.
e、如果在iframe的页面未完全装载的时候,调用iframe的dom模型,会发生错误.

2、子页面操作父页面
这里以子页面FrameA.aspx举例。在子页面A中,我们通过函数getParent获取MainForm.aspx的dom元素,然后按照正常的dom元素操作就是了:

ContractedBlock.gifCode


3、子页面操作子页面
这个还要借助主页面间接获取另一个子页面。这里还以子页面A来举例。通过主页面,我们间接获取了子页面B,然后像正常操作dom一样,子页面A完成对子页面B的控制和操作。
先修改getAnotherChild()函数:

ContractedBlock.gifCode

 注意:修改完getAnotherChild()函数,然后将子页面A(FrameA.aspx)中的textUserName的onblur事件改为 onblur="getAnotherChild()"就可以看到结果了.








本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/01/1516819.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Web前端】【JavaScript】实现表格隔行变色
【Web前端】【JavaScript】实现表格隔行变色
26 0
JavaScript中实现replaceAll方法
我们在Java中可以使用replaceAll()方法对字符串进行批量替换,但在JS中replaceAll()方法是undefined,JS中只存在replace()方法,因此我们可以自己封装JS中replaceAll()方法供我们便捷使用。
17 0
JavaScript中实现摸球概率统计事件
在三个不透明的盒子中分别每个盒子装了两个球,第一个盒子装2个红球,第二个盒子装1个红球和1个蓝球,第三个盒子装2个蓝球,问:随机从三个盒子中取出一个球,问这个球是红球的概率?
14 0
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
59 0
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
使用前端三件套实现一个实时跟新的时钟,其中包括电子时钟和刻度时钟
39 0
万文篇章带你搞懂JavaScript——如何使用js实现模态框拖动,放大镜和侧边栏固定效果
万文篇章带你搞懂JavaScript——如何使用js实现模态框拖动,放大镜和侧边栏固定效果
14 0
【JavaScript-动画原理】如何使用js进行动画效果的实现
【JavaScript-动画原理】如何使用js进行动画效果的实现
14 0
JavaScript深入之call和apply的模拟实现
JavaScript深入系列第十篇,通过call和apply的模拟实现,带你揭开call和apply改变this的真相
48 0
JavaScript实现百度换肤效果
百度的默认页面并不是所有人都喜欢,有些人喜欢其他页面,我们可以使用代码进行换装操作
353 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Javascript异步编程
立即下载
Javascript中的函数
立即下载
在 IoT 设备进行 JavaScript 开发的探索之路
立即下载