javascript对iframe的互操作浅析

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

2、子页面A

ContractedBlock.gif Code

3、子页面B

ContractedBlock.gif Code


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

ContractedBlock.gif Code

 小结:
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.gif Code


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

ContractedBlock.gif Code

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








本文转自JeffWong博客园博客,原文链接:http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/01/1516819.html,如需转载请自行联系原作者
目录
相关文章
|
30天前
|
JavaScript 索引
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值
|
30天前
|
JavaScript
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
|
30天前
|
JavaScript
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
适配针式打印机EPSON爱普生,在vue项目中用原生js搭配iframe完成唤起打印弹窗
|
7月前
|
JavaScript
JS/JQuery操作iframe元素
JS/JQuery操作iframe元素
|
8月前
|
存储 移动开发 JavaScript
JS中iframe如何却写面包屑功能
JS中iframe如何却写面包屑功能
|
9月前
|
JavaScript 前端开发
js内联外联样式的获取,父页面获取iframe框架元素返回null
js内联外联样式的获取,父页面获取iframe框架元素返回null
|
9月前
|
JavaScript 安全
原生JS路由,iframe框架
原生JS路由,iframe框架
|
10月前
|
JavaScript
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
71 0
|
11月前
|
存储 JavaScript 前端开发
js实现iframe框架的面包屑功能
js实现iframe框架的面包屑功能
|
11月前
|
JSON JavaScript 前端开发
JavaScript iframe 多窗口通信实战
JavaScript iframe 多窗口通信实战