iframe元素用法總結(jié)
iframe是一個非常有用的標(biāo)簽，先不說早期用它來模型Ajax效果，現(xiàn)在富本文編輯器它也絕對是主角。但是它又是一個特別的元素，最早出現(xiàn)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可以生成如下代碼:
但是如果使用DOM方式來生成一個iframe時IE卻始終隱藏不了邊框，例如：
我們需要直接對其屬性進(jìn)行賦值：
Internet Explorer 5.5 支持浮動框架的內(nèi)容透明。如果想要為浮動框架定義透明內(nèi)容，則必須滿足下列條件:
- 與 iframe 元素一起使用的 allowTransparency 標(biāo)簽屬性必須設(shè)置為 true。
- 在 iframe 內(nèi)容源文檔，background-color 或 body 元素的 bgColor 標(biāo)簽屬性必須設(shè)置為 transparent。
對iframe進(jìn)行操作：
如果只想改變iframe的 src 或者 border ，scrolling 等attributes(與property不是一個概念,property是不能寫在標(biāo)簽內(nèi)的，比如:scrollHeight，nnerHTML等)，就需要用到第一種方法。
如果想取得iframe的頁面(不是iframe本身)。就需要使用第二種方法，因?yàn)樗〉玫氖且粋€完整的DOM模型，比如想得到iframe的document.body的內(nèi)容，就只能用第二種方法
操作iframe中的DOM元素，需要注意以下兩點(diǎn)：
- 必須先獲取指定iframe的document
- 對于1，必須在頁面load完以后才能獲??；
控制Iframe中的頁面的樣式
去掉動態(tài)創(chuàng)建的iframe的邊框
window跟iframe標(biāo)簽是兩回事 iframe的contentWindow屬性是它里面的window
用getElementById才能取到iframe標(biāo)簽 ie直接用id得到的是里面的window
有關(guān)高度自適應(yīng)問題
scrollHeight返回的是一個數(shù)字，沒有帶單位
在IE 下如果沒有DTD聲明，則按loose.dtd 解析，在設(shè)置對像的寬高時，會自動的加上單位"px"
將iframe的高度設(shè)為document.body的高度，也并不一定能成功,因?yàn)閐ocument.body的高度可能沒有整個檔的高度大，如使用了層
正確寫法如下
通過iframe訪問主頁面
注：偽Ajax效果就是這樣模擬的了
document.getElementById取到的iframe是不能直接操作里面的document的，只能這樣?。?/p>
- 在IE為是frames[id].document或document.getElementById(id).contentWindow.document;
- 在firefox為frames[name].contentDocument或document.getElementById(id).contentDocument;
最后切記iframe在FF中是不綁定任何事件的！
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點(diǎn)擊進(jìn)入論壇
