您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 總結(jié)iframe的使用第一部分

總結(jié)iframe的使用第一部分

文章來源：365jz.com 點擊數(shù)：1430 更新時間：2009-09-20 08:53 參與評論

可能大家對iframe標簽并不陌生吧，可是否能很正確地使用它呢？
1. js怎么使用iframe呢？
    ifr是一個以存在的 iframe 的 ID 和 NAME 值:
      document.getElementById(“ifr”);
      window.frames[“ifr”];
    這兩個對象有什么區(qū)別呢？
    要想使用iframe內(nèi)的函數(shù),變量就必須通過window.frames[“ifr”].因為它取的是一個完整的DOM模型
    如果只想改變iframe的 src 或者width,scrolling 等屬性就要用document.getElementById(“ifr”);
    還要注意的是,如果在iframe的頁面未完全裝入的時候,調(diào)用iframe的DOM模型,會發(fā)生很嚴重的錯誤,所以,你要準備一個容錯模式.

舉例說明:
在網(wǎng)頁iframe1.html中代碼如下
<iframe id="eyejsF"   frameborder="1" width="100px" src="eyejs.html"></iframe>
<br/>
<input type="button" value="獲取或設(shè)置iframe內(nèi)的信息方式一" onclick="opIframeDom()"/>
<input type="button" value="獲取或設(shè)置iframe內(nèi)的信息方式二" onclick="opIframeDom1()"/>
<input type="button" value="獲取或設(shè)置iframe內(nèi)的信息方式三" onclick="opIframeDom2()"/>
<input type="button" value="獲取或設(shè)置本身的屬性" onclick="opIframeAttribute()"/>

<script language="JavaScript">
//案例演示，
利用document.getElementById("ifr").contentWindow來獲取src中包含網(wǎng)頁(就叫B網(wǎng)頁)的DOM對象,
document.getElementById("ifr").contentWindow就相當于B網(wǎng)頁的window對象

在IE為是window.frames[ id ]或document.getElementById(id).contentWindow
在firefox為window.frames[ name ]或document.getElementById(id).contentWindow
注意啦IE下是window.frames[ id ] 而FF是window.frames[ name ] 也就是iframe標簽必需有id和name再能用此方法
請看下面四種方法(已在IE 6 7 8和FF下測試過)
/**/
var opIframeDom=function(){
    var ifrObj = window.document.getElementById('eyejsF');
    var ifrDom=ifrObj.contentWindow; //在IE 6 7 8和FF下都通過，因此為了兼容IE和FF就用此方法
    alert(ifrDom.document.getElementById("eyejsID").innerHTML);
    ifrDom.document.getElementById("eyejsID").innerHTML="我現(xiàn)在在eyejs網(wǎng)上";
};
var opIframeDom1=function(){
     var ifrDom = window.frames['eyejsF']; //在FF下iframe中必需有name再能有效
    alert(ifrDom.document.getElementById("eyejsID").innerHTML);
    ifrDom.document.getElementById("eyejsID").innerHTML="我現(xiàn)在在eyejs網(wǎng)上";
};
var opIframeDom2=function(){
    var ifrObj = window.document.getElementById('eyejsF');
    var ifrDom=ifrObj.contentDocument;//在IE 6和IE 7中是undefined，而在IE 8和FF中可以用
    alert(ifrDom)
    alert(ifrDom.getElementById("eyejsID").innerHTML);
    ifrDom.getElementById("eyejsID").innerHTML="我現(xiàn)在在eyejs網(wǎng)上";
};
/*本身的屬性*/
var opIframeAttribute=function(){
   var ifrObj = window.document.getElementById('eyejsF');
   alert(ifrObj.width);
   ifrObj.width="200px";
}
</script>
-------------------------------------------------------------------------------------------------------------------------------------------
iframe的包含網(wǎng)頁eyejs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<div id="eyejsID">我在eyejs.html</div>
</body>
</html>
小結(jié)如下：
1.獲取iframe對象可以用document.getElementById('eyejsF')和window.frames['eyejsF']
      但是用window.frames['eyejsF']此方法時, 在FF下iframe中必需有name再能有效
2.獲取iframe對象的包含網(wǎng)頁的Dom對象就要用 iframe對象.contentWindow或iframe對象.contentDocument
    但是iframe對象.contentDocument在IE 6 和IE 7中不支持，IE 8又支持了
因此為了兼容IE和FF,獲取iframe中的dom對象建議用第一種方法document.getElementById('ifr').contentWindow.document.getElementById(id)對象來操作
了解了iframe的使用后，就可以參考下面的屬性來做一些東西了
-------------------------------------------------------------------------------------------------------------------------------------------
IFRAME標簽屬性小結(jié)：

火狐的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

-------------------------------------------------------------------------------------------------------------------------------------------
還要注意一些特殊情況:
1. 通常要隱藏iframe的邊框時需要用到frameborder屬性
2.    var iframe = document.createElement('iframe');
       iframe.setAttribute('frameborder',0);//Firefox下有效，IE下無效
       而如果我們需要直接對其屬性進行賦值：
       iframe.frameBorder=0;//Firefox和IE均有效為了兼容IE和FF，就用此方法
3. 如果想要為浮動框架定義透明內(nèi)容，則必須滿足下列條件:
    * 與 iframe 元素一起使用的 allowTransparency 標簽屬性必須設(shè)置為 true。
    * 在 iframe 內(nèi)容源文檔，background-color 或 body 元素的 bgColor 標簽屬性必須設(shè)置為 transparent。
4. 去掉動態(tài)創(chuàng)建的iframe的邊框
       var iframe = document.createElement('iframe');
       iframe.scrolling="no";//這兩個屬性的設(shè)置缺一不可。
      iframe.frameborder="no";
5.有關(guān)高度自適應(yīng)問題
   scrollHeight返回的是一個數(shù)字，沒有帶單位
在IE 下如果沒有DTD聲明，則按loose.dtd 解析，在設(shè)置對像的寬高時，會自動的加上單位"px"
將iframe的高度設(shè)為document.body的高度，也并不一定能成功,因為document.body的高度可能沒有整個檔的高度大，如使用了層
正確寫法如下
       var MainFrame = parent.document.getElementById("main");
       MainFrame.style.height = document.documentElement.offsetHeight+"px";//最好在這上面還加上一個常數(shù)，如10
案例下載：    http://www.eyejs.com/html/79/n-179.html