url:http://www.cnblogs.com/rubylouvre/archive/2009/08/01/1536710.html
iframe是一个非常有用的标签,先不说早期用它来模型Ajax效果,现在富本文编辑器它也绝对是主角。但是它又是一个特别的元素,最早出现IE4.0中,后纷纷被其他游览器吸纳,由于IE不开源,iframe在各游览器中都有很大差异。首先我们看看它在各游览器中拥有什么属性——
火狐的iframe的所有属性:
scrollWidth, clientLeft, clientHeight, clientWidth, clientTop, getClientRects, getBoundingClientRect, getElementsByClassName, baseURI, textContent, compareDocumentPosition, getUserData, isSameNode, lookupNamespaceURI, setUserData, lookupPrefix, isDefaultNamespace, isEqualNode, dispatchEvent, removeEventListener, style,contentEditable, offsetParent, innerHTML, offsetLeft, offsetTop, offsetHeight, offsetWidth, contentWindow, src, contentDocument, className, id, title, tagName, removeAttributeNS, removeAttribute, getAttribute, getElementsByTagName, setAttribute, getElementsByTagNameNS, hasAttributeNS, setAttributeNS, hasAttribute, getAttributeNS, nextSibling, firstChild, prefix, nodeValue, childNodes, nodeName, namespaceURI, previousSibling, nodeType, localName, lastChild, ownerDocument, parentNode, attributes, appendChild, cloneNode, normalize, hasChildNodes, insertBefore, replaceChild, removeChild, hasAttributes, isSupported, getAttributeNode, setAttributeNode, removeAttributeNode, getAttributeNodeNS, setAttributeNodeNS, ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE, CDATA_SECTION_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, PROCESSING_INSTRUCTION_NODE, COMMENT_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, lang, dir, align, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling,width , getSVGDocument, tabIndex, draggable, blur, focus, scrollIntoView, spellcheck, addEventListener, getFeature, DOCUMENT_POSITION_DISCONNECTED, DOCUMENT_POSITION_PRECEDING, DOCUMENT_POSITION_FOLLOWING, DOCUMENT_POSITION_CONTAINS, DOCUMENT_POSITION_CONTAINED_BY, DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC, scrollTop, scrollLeft, scrollHeight, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling, childElementCount, children, querySelector, querySelectorAll
IE6的iframe所有属性
language, scrollHeight, isTextEdit, currentStyle,document , onmouseup, oncontextmenu, isMultiLine, clientHeight, onrowexit, onbeforepaste, onactivate, scrollLeft, lang, onmousemove, onmove, onselectstart, parentTextEdit, oncontrolselect, canHaveHTML, onkeypress, oncut, onrowenter, onmousedown, onpaste, className, id, onreadystatechange,onbeforedeactivate , hideFocus, dir, isContentEditable, onkeydown, clientWidth, onlosecapture, parentElement, ondrag, ondragstart, oncellchange, recordNumber, onfilterchange, onrowsinserted, ondatasetcomplete, onmousewheel, ondragenter, onblur, onresizeend, onerrorupdate, onbeforecopy, ondblclick, scopeName, onkeyup, onresizestart, onmouseover, onmouseleave, outerText, innerText, onmoveend, tagName, title, offsetWidth, onresize, contentEditable, runtimeStyle, filters, ondrop, onpage, onrowsdelete, tagUrn, offsetLeft, clientTop, style, onfocusout, clientLeft, ondatasetchanged, canHaveChildren, ondeactivate, isDisabled, onpropertychange, ondragover, onhelp, ondragend, onbeforeeditfocus, disabled, onfocus, behaviorUrns, accessKey, onscroll, onbeforeactivate, onbeforecut, readyState, all, sourceIndex, onclick, scrollTop, oncopy, onfocusin, tabIndex, onbeforeupdate, outerHTML, innerHTML, ondataavailable, offsetHeight, onmovestart, onmouseout, scrollWidth, offsetTop, onmouseenter, onlayoutcomplete, offsetParent, onafterupdate, ondragleave, children, parentNode, border, nodeValue, firstChild, name, align, marginWidth,contentWindow , hspace, frameSpacing, dataFormatAs, lastChild, ownerDocument, vspace, marginHeight, dataFld, attributes, dataSrc, src, frameBorder, nodeType, noResize, width, previousSibling, scrolling, nodeName, childNodes, longDesc, onload, nextSibling, height, allowTransparency
IE8的iframe所有属性
nextSibling, onresizeend, onrowenter, aria-haspopup, childNodes, ondragleave, canHaveHTML, onbeforepaste, ondragover, onbeforecopy, aria-disabled, onpage, recordNumber, previousSibling, nodeName, onbeforeactivate, accessKey, currentStyle, scrollLeft, onbeforeeditfocus, oncontrolselect, aria-hidden, onblur, hideFocus, clientHeight, style, onbeforedeactivate, dir, aria-expanded, onkeydown, nodeType, ondragstart, onscroll, onpropertychange, ondragenter, id, aria-level, onrowsinserted, scopeName, lang, onmouseup, aria-busy, oncontextmenu, language, scrollTop, offsetWidth, onbeforeupdate, onreadystatechange, onmouseenter, filters, onresize, isContentEditable, aria-checked, aria-readonly, oncopy, onselectstart, scrollHeight, onmove, ondragend, onrowexit, lastChild, aria-secret, onactivate, canHaveChildren, onfocus, onfocusin, isMultiLine, onmouseover, offsetTop, oncut, parentNode, tagName, className, onmousemove, title, role, behaviorUrns, onfocusout, onfilterchange, disabled, parentTextEdit, ownerDocument, offsetParent, aria-posinset, ondrop, ondblclick, onrowsdelete, tabIndex, onkeypress, aria-relevant, onlosecapture, innerText, aria-live, parentElement, ondeactivate, aria-labelledby, aria-pressed, children, ondatasetchanged, ondataavailable, aria-invalid, onafterupdate, nodeValue, onmousewheel, onkeyup, readyState, onmovestart, aria-valuenow, aria-selected, onmouseout, aria-owns, aria-valuemax, onmoveend, contentEditable, document, firstChild, sourceIndex, outerText, isTextEdit, isDisabled, oncellchange, runtimeStyle, scrollWidth, aria-valuemin, onlayoutcomplete, onhelp, attributes, offsetHeight, onerrorupdate, onmousedown, clientTop, aria-setsize, clientWidth, onpaste, tagUrn, onmouseleave, onclick, outerHTML, ondrag, aria-controls, onresizestart, aria-flowto, ondatasetcomplete, aria-required, clientLeft, aria-describedby, all, onbeforecut, innerHTML, aria-activedescendant, aria-multiselectable, offsetLeft, frameSpacing, vspace, noResize, onload,height , marginHeight,border , longDesc, src, frameBorder, dataFormatAs,width , dataSrc, allowTransparency, contentDocument, name,contentWindow, marginWidth, dataFld, scrolling, align, hspace
通常要隐藏iframe的边框时需要用到frameborder属性,例如使用Dreamweaver可以生成如下代码:
<iframe frameborder=0 src= 'xxxx' width= 'xxx' height= 'xxx' ></iframe>
|
但是如果使用DOM方式来生成一个iframe时IE却始终隐藏不了边框,例如:
var iframe = document.createElement( 'iframe' );
|
iframe.setAttribute( 'frameborder' ,0);
|
我们需要直接对其属性进行赋值:
Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件:
- 与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。(但设置了allowTransparency=true就遮不住select了!)
- 在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent。
具体事例
1. 包含框架页的代码。
<body bgColor= "#eeeeee" > <iframe allowTransparency= "true" src= "transparent.htm" > </iframe>
|
2.transparent.htm页的代码。
<body bgColor= "transparent" >
|
对iframe进行操作:
var obj = document.getElementById(“iframe”);
|
var dom = document.all.frames[“iframe”];
|
如果只想改变iframe的 src 或者 border ,scrolling 等attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,innerHTML等),就需要用到第一种方法。
如果想取得iframe的页面(不是iframe本身)。就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法
操作iframe中的DOM元素,需要注意以下两点:
- 必须先获取指定iframe的document
- 对于1,必须在页面load完以后才能获取;
控制Iframe中的页面的样式
<meta http-equiv= "Content-Type" content= "text/html; charset=gb2312" />
|
<iframe id= "FF" src= "B.htm" ></iframe>
|
<input type= "submit" value= " OK " onclick= "OK()" />
|
<script language= "JavaScript" >
|
var iframe = document.getElementById( 'FF' );
|
var body = iframe.contentWindow.document.body;
|
body.style.marginTop = 50;
|
body.style.fontSize = 30;
|
body.style.textAlign = 'center' ;
|
body.style.backgroundColor = 'red' ;
|
body.style.color = 'blue' ;
|
去掉动态创建的iframe的边框
var iframe = document.createElement( 'iframe' );
|
window跟iframe标签是两回事 iframe的contentWindow属性是它里面的window
用getElementById才能取到iframe标签 ie直接用id得到的是里面的window
有关高度自适应问题
scrollHeight返回的是一个数字,没有带单位
在IE 下如果没有DTD声明,则按loose.dtd 解析,在设置对像的宽高时,会自动的加上单位"px"
将iframe的高度设为document.body的高度,也并不一定能成功,因为document.body的高度可能没有整个档的高度大,如使用了层
正确写法如下
var MainFrame = parent.document.getElementById( "main" );
|
MainFrame.style.height = document.documentElement.offsetHeight+ "px" ;
|
通过iframe访问主页面
注:伪Ajax效果就是这样模拟的了
<script type= "text/javascript" >
|
window.onload = function () {
|
var frame = document.getElementById( "frame1" );
|
var msg = frame.contentDocument.getElementById( "message" );
|
msg.innerHTML = "Hello World from Frame Page 1" ;
|
<pre class= "brush:javascript;gutter:false;toolbar:false" >
|
<div class= "errordisplay" id= "message" >
|
<script type= "text/javascript" >
|
var msg = window.parent.document.getElementById( "message" );
|
msg.innerHTML = "Updated from iFrame" ;
|
document.getElementById取到的iframe是不能直接操作里面的document的,只能这样取:
- 在IE为是frames[id].document或document.getElementById(id).contentWindow.document;
-
在firefox为frames[name].contentDocument或document.getElementById(id).contentDocument;
最后切记iframe在FF中是不绑定任何事件的!例子参见的另一篇博文
setAttribute的”bug”已经Fixed: 在ie8之前,用setAttribute方法为设定属性时,会有以下bug: "class", "for", "name", "style"这些属性都会不成功(亦或者说不能达到预期,比如setAttribute(“class”,”mystyleName”)会在element上设置attribute,但是并没有达到我们改变className目的),在IE8中已经修复。
获取iframe的window对象:
function getIframeWindow(iframeElement){
|
return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow;
|
判定页面是否存在iframe
window.onload = function (){
|
var hasFrame = typeof window.frameElement === “undefined”
|
原理是,没iframe的时候window.frameElement为null。
(iframe)使用总结
2009年12月25日 星期五 15:36
在Web开发过程中,为了提高页面架构层次的清晰性和灵活性,应对复杂的页面布局,使用嵌入式框架iframe可能是最有效的解决办法。如果布局比较复杂或页面层次较多,则可能会用到嵌套多层的iframe,然而iframe并不会根据页面高度自动调整自身高度,为了屏蔽滚动条提高视觉效果,就需要使用javascript代码使iframe自动调整高度。 1、单层情况,假设在A.aspx页面的某个位置嵌入页面B.aspx,则在A页面中需使用一个嵌入框架iframeA,其示例代码如下: <head> ... <script type="text/javascript"> //iframeName:框架ID function SetIframeSize(iframeName) { var iframe = document.getElementById(iframeName); try { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; //据说这两个高度可能不一样 var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } </script> </head> <body> ... <tr> <td> <iframe id="iframeA" name="iframeA" scrolling="no" frameborder="0" src="B.aspx" width="100%"
onload="SetIframeSize('iframeA');"></iframe> </td> <tr> ... </body> ...
2、嵌套两层情况,假设A.aspx页面通过嵌入式框架iframeA嵌入页面B.aspx,页面B.aspx又通过嵌入式框架iframeB嵌入页面C.aspx,其中A.aspx示例代码和单层情况一样,B.aspx页面的示例代码如下:
... <head> ... <script type="text/javascript"> //iParentFrameName:父框架ID //iframeName:框架ID function SetIframeSize(iParentFrameName,iframeName) { var iframe = document.getElementById(iframeName); try { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; //据说这两个高度可能不一样 var height = Math.max(bHeight, dHeight); iframe.height = height; //更新父框架高度 SetIframeSize2(iParentFrameName) }catch (ex){} }
//iframeName:框架ID function SetIframeSize2(iframeName) { var iframe = window.parent.parent.document.getElementById(iframeName); try { var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } </script> </head> <body> ... <tr> <td> <iframe id="iframeB" name="iframeB" scrolling="no" frameborder="0" src="C.aspx" width="100%"
onload="SetIframeSize('iframeA','iframeB');"></iframe> </td> <tr> ... </body> ...
其中代码 var iframe = window.parent.parent.document.getElementById(iframeName); window指C.aspx,window.parent指B.aspx,window.parent.parent指A.aspx 事实上如果没有特别需要(比如B.aspx页面条件加载C.aspx页面)下,A.aspx中iframeA可以不要onload事件。
3、嵌套多层情况 多层嵌层以两层情况为例类推,同上没有特别需要,只设最后一级iframe的onload事件。
|
分享到:
相关推荐
Iframe用法精析 <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src=move-ad.htm></iframe> <IFRAME>用于设置文本或图形的浮动图文框或容器。 BORDER &...
简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下: 1. 作为弹出层铺底覆盖 大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素...
看其代码才明白,真正意义上来讲IE在创建一个新的iframe时的onload方法需要使用attachEvent来绑定,而原来就存在的iframe的onload方法,则可以直接绑定。 说的有些乱,大家看代码,一看便知: 代码如下: <ifr
随着业务的发展,自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同,所以这个公共组件就不能方便地被引用了。为解决这个问题,我们把这个组件写成了单独的页面挂...
主要是对使用jquery操作iframe的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
答案是确定的,而且方法不只一种,在以前我只会使用iframe来引用,后来发现了另外的几种方法,那今天就总结这几种方法让大家参考一下,本人觉得第三种方式较好! 在html文件引入其它html文件的几种方法 1.IFrame...
4.打印页面的特定部分我是通过将需要打印的特定部分另建一个页面,然后装入主页面的一个IFrame中,再调用IFrame的打印方法,只打印IFrame中的内容实现的。如:<iframe style="visibility: visible" name="FrameId" ...
页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,...
本文实例讲述了不使用XMLHttpRequest对象实现Ajax效果的方法。分享给大家供大家参考,具体如下: 前言: 我以前接触Ajax的时候,只是用Jquery的...我总结了几种方法,会有实例来说明如何使用的。 方法: (1)利用204
1.4 本章小结 12 第2章 HTML 5的常用元素与属性 14 2.1 HTML 5保留的常用元素 15 2.2 HTML 5增强的iframe元素 34 2.3 HTML 5保留的通用属性 40 2.4 HTML 5新增的通用属性 44 2.5 HTML 5新增的结构元素 48 2.6...
1. QTP描述性编程 8 ...84. QTP中&和_的用法。 171 85. 选取webList中某一项 172 86. object.SetCaretPos方法 172 87. Similar to watir sample using description programming 173 88. QTP使用outlook发邮件 173
今天总结一下js中几个对象的区别和用法: 首先来说说 parent.window与top.window的用法 “[removed].href”、”location.href”是本页面跳转 “parent.location.href”是上一层页面跳转 “top.location.href”是最...
Chrome限制了浏览器所能使用的内存极限(64位为1.4GB,32位为1.0GB),这也就意味着浏览器将无法直接操作一些大内存对象。 V8引擎在执行垃圾回收时会阻塞 JavaScript应用逻辑,直到垃圾回收结束再重新执行JavaScript...
这里首先想到就是把h5页面用iframe内嵌到pc网页中,然后pc通过postMessage方法,把变化的数据发送给iframe,iframe内嵌的h5通过addEventListener接收数据,再对数据做响应式的变化。 这里总结一下postMessage的使用...
第一种方法,ajax实现:当然,ajax使用起来确实很简单就可以实现,但是里面的很多知识还是比较有点深的。我之前做页面时间自动刷新的功能就是用的ajax。完整代码是:1.getTime.php:复制代码 代码如下:<?phpheader...
1.5 小结 15 1.6 习题 16 第2章 HTML文件基本标记 17 教学录像:44分钟 2.1 HTML头部标记 18 2.2 标题标记<title> 18 2.3 元信息标记<meta> 19 2.3.1 设置页面关键字 19 2.3.2 设置...
1.5 小结 1.6 资源 第2章 Ajax新手上路 2.1 Aiax的关键元素 2.2 用JavaScript改善用户体验 2.3 用CSS定义应用的外观 2.3.1 CSS选择器 2.3.2 CSS样式属性 2.3.3简单的CSS例子 2.4 用DOM组织视图 2.4.1 使用JavaScript...
JavaScript电子书,包括了JavaScript的大部分知识,可以帮助读者快速入门。内容如下: 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 ...8.4 本章小结