• iframe元素用法总结


    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可以生成如下代码:

    1.
    2.<iframe frameborder=0 src='xxxx' width='xxx' height='xxx'></iframe>

    但是如果使用DOM方式来生成一个iframe时IE却始终隐藏不了边框,例如:

    1.
    2.var iframe = document.createElement('iframe');
    3.iframe.setAttribute('frameborder',0);//Firefox下有效,IE下无效

    我们需要直接对其属性进行赋值:

    1.
    2.iframe.frameBorder=0;//Firefox和IE均有效

    Internet Explorer 5.5 支持浮动框架的内容透明。如果想要为浮动框架定义透明内容,则必须满足下列条件:

    • 与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true。
    • 在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent。

    1. 包含框架页的代码。

    1.
    2.<body bgColor="#eeeeee"> <iframe allowTransparency="true" src="transparent.htm"> </iframe>

    2.transparent.htm页的代码。

    1.
    2.<body bgColor="transparent">

    对iframe进行操作:

    1.
    2.var obj = document.getElementById(“iframe”);//获取对象
    3.var dom = document.all.frames[“iframe”];//获取DOM

    如果只想改变iframe的 src 或者 border ,scrolling 等attributes(与property不是一个概念,property是不能写在标签内的,比如:scrollHeight,nnerHTML等),就需要用到第一种方法。

    如果想取得iframe的页面(不是iframe本身)。就需要使用第二种方法,因为它取得的是一个完整的DOM模型,比如想得到iframe的document.body的内容,就只能用第二种方法

    操作iframe中的DOM元素,需要注意以下两点:

    1. 必须先获取指定iframe的document
    2. 对于1,必须在页面load完以后才能获取;

    控制Iframe中的页面的样式

    01.
    02.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    03.<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    04.<head>
    05.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    06.<title></title>
    07.</head>
    08.<body>
    09.<iframe id="FF" src="B.htm"></iframe>
    10.<input type="submit" value=" OK " onclick="OK()"/>
    11.
    12.<script language="JavaScript">
    13.function OK()
    14.{
    15. // 操作iframe中内容的CSS
    16. var iframe = document.getElementById('FF');
    17. var body = iframe.contentWindow.document.body;
    18.
    19. body.style.marginTop = 50;
    20. body.style.padding = 0;
    21. body.style.fontSize = 30;
    22. body.style.textAlign = 'center';
    23. body.style.backgroundColor = 'red';
    24. body.style.color = 'blue';
    25.}
    26.</script>
    27.</body>
    28.</html>

    去掉动态创建的iframe的边框

    1.
    2.var iframe = document.createElement('iframe');
    3.iframe.scrolling="no";//这两个属性的设置缺一不可。
    4.iframe.frameborder="no";

    window跟iframe标签是两回事 iframe的contentWindow属性是它里面的window

    用getElementById才能取到iframe标签 ie直接用id得到的是里面的window

    有关高度自适应问题

    scrollHeight返回的是一个数字,没有带单位

    在IE 下如果没有DTD声明,则按loose.dtd 解析,在设置对像的宽高时,会自动的加上单位"px"

    将iframe的高度设为document.body的高度,也并不一定能成功,因为document.body的高度可能没有整个档的高度大,如使用了层

    正确写法如下

    1.var MainFrame = parent.document.getElementById("main");
    2.MainFrame.style.height = document.documentElement.offsetHeight+"px";//最好在这上面还加上一个常数,如10

    通过iframe访问主页面

    注:伪Ajax效果就是这样模拟的了

    01.
    02. <script type="text/javascript">
    03. window.onload = function() {//这是主页面的代码
    04. var frame = document.getElementById("frame1");
    05. var msg = frame.contentDocument.getElementById("message");
    06. msg.innerHTML = "Hello World from Frame Page 1";
    07. };
    08. </script>
    09.</pre>
    10.<pre class="brush:javascript;gutter:false;toolbar:false">
    11.//这是iframe部分!
    12. <div class="errordisplay" id="message">
    13.original
    14.</div>
    15.
    16.<script type="text/javascript">
    17. var msg = window.parent.document.getElementById("message");
    18. msg.innerHTML = "Updated from iFrame";
    19.</script>

    document.getElementById取到的iframe是不能直接操作里面的document的,只能这样取:

    • 在IE为是frames[id].document或document.getElementById(id).contentWindow.document;
    • 在firefox为frames[name].contentDocument或document.getElementById(id).contentDocument;

    最后切记iframe在FF中是不绑定任何事件的!

  • 相关阅读:
    firefox 插件开发2
    android ndk
    android Fragment.
    排序算法
    php中判断iphone版本
    php css
    ndk 入门实例
    howtoaddabuttontopreferencescreen 自定义view
    分布式K/V存储方案
    android版 eclipse
  • 原文地址:https://www.cnblogs.com/top5/p/1575041.html
Copyright © 2020-2023  润新知