iframe是一个非常有用的标签,先不说早期用它来模型Ajax效果,现在富本文编辑器它也绝对是主角。但是它又是一个特别的元素,最早出现IE4.0中,后纷纷被其他游览器吸纳,由于IE不开源,iframe在各游览器中都有很大差异。本文针对IE9、FF、Chrome三大浏览器进行分析。
1.获得iframe对象
我们常用的获得iframe的方式一般有两种
var
obj = document.getElementById(“iframe”);
//获取对象
var
dom = window.frames[“iframe”];
//获取DOM
如果只想改变iframe的 src 或者 border ,scrolling 等attributes,就需要用到第一种方法。
操作iframe中的DOM元素,需要注意以下两点:
- 必须先获取指定iframe的document
- 对于1,必须在页面load完以后才能获取;
4.iframe高度自适应
scrollHeight返回的是一个数字,没有带单位
在IE 下如果没有DTD声明,则按loose.dtd 解析,在设置对像的宽高时,会自动的加上单位"px"
将iframe的高度设为document.body的高度,也并不一定能成功,因为document.body的高度可能没有整个档的高度大,如使用了层
正确写法如下
.在子页面中进行设置frame的高度
var frm=window.parent.document.getElementById("frm");//获得父窗口
frm.style.height=document.body.scrollHeight + "px";//设置父窗口的高度
5.contentWindow和contentDocument
我们开始使用window.frames["name"]获得frame中的页面window对象
使用document.getElementById(id)只能获得frame对象
但是通过frame对象的contentWindow属性或contentDocument也可以获得
在这里由于frame存在跨域访问限制,所以用法不一。
chrome:iframeElement.contentDocument
firefox:iframeElement.contentDocument
ie:element.contentWindow.document
代码
var dom=document.getElementById("frm");
var value;
if(dom.conentWindow){
value=dom.conentWindow.document.getElementById("txt").value;//IE
}else{
value=dom.conentDocument.getElementById("txt").value;//FF,chrome
}
总结:在网页中,iframe的用法非常多,主要应用于伪ajax、嵌套页面、页面重用。所以在网页中具有一定的重要性,本文主要
在iframe的对象获取、窗口互访问、自适应高度等常用功能进行分析代码实现
相关推荐
本篇主要是对JS操作iframe里的dom进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
js操作iframe的一些知识,操作iframe
js 操作iframe
通过HTTPClient界面在JSP中嵌入iframe子界面跨域时,无法获取跨域界面的属性值的问题
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
JS页面跳转和js对iframe进行页面跳转、刷新
js 操作 frameset frame iframe对象
JS获取/设置iframe内对象元素、文档的几种方法 1、IE专用(通过frames索引形象定位): 代码如下: document.frames[i].document.getElementById(‘元素的ID’); 2、IE专用(通过iframe名称形象定位): 代码如下: ...
本文实例讲述了jQuery操作iframe中js函数的方法。分享给大家供大家参考,具体如下: 1、jquery操作iframe中的元素(2种方式) var tha = $(window.frames[core_content].document).find(#trewuuu).html(); var thb ...
本篇文章介绍了js操作iframe的一些方法的实例代码与步骤,有需要的朋友可以参考一下
主要介绍了js改变Iframe中Src的方法,涉及javascript操作网页元素属性的相关技巧,非常具有实用价值,需要的朋友可以参考下
主要介绍了JS实现向iframe中表单传值的方法,涉及js针对页面元素及表单属性操作相关实现技巧,需要的朋友可以参考下
在做项目时,遇到了操作iframe的相关问题。业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过...
对frameset、frame、iframe的js操作.pdf
在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,而往往iframe还没添加完呢,后边的代码就已经执行完了,所以有些你写的东西根本没有显示出来。这时,我们就要考虑是否可以等iframe加载完后再执行...
主要介绍了JS修改iframe页面背景颜色的方法,涉及javascript操作iframe页面样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
本文主要给大家介绍了关于利用JS对iframe父子(内外)页面进行操作的方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、获取iframe里的内容 在开始之前,首先我们来看看如何获取iframe里的内容,获取...
NULL 博文链接:https://justcoding.iteye.com/blog/770225