iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
提示：您可以把需要的文本放置在 iframe 和 /iframe 之間，這樣就可以應對無法理解 iframe 的瀏覽器。

 iframe width=420 height=330 frameborder=0 scrolling=auto src= URL /iframe 

 注：測試環境IE：8.0，FF：23.0.1 a 隱藏iframe表框 i 標簽中設置：frameborder= 0 , iframe frameborder= 0 width= 400 height= 400 src= http://blog.csdn.net/cuew1987 scrolling= no /iframe  ii DOM操作： body  iframe frameborder= 1 width= 400 height= 400 src= http://blog.csdn.net/cuew1987 scrolling= no id= myiframe /iframe  script  var myiframe = document.getElementById( myiframe  myiframe.style.border= none //FF下有效，IE下無效  myiframe.setAttribute( frameborder ,0);//FF下有效，IE下無效  myiframe.frameBorder = 0;//FF下有效，IE下無效  /script  /body  b 動態創建iframe script  var newFrame = document.createElement( iframe  newFrame.src = http://blog.csdn.net/cuew1987  newFrame.frameBorder = 0;//FF、IE隱藏邊框有效 newFrame.width = 400px  newFrame.height = 400px  newFrame.scrolling = no  document.body.appendChild(newFrame); /script  c 獲取iframe i var obj = document.getElementById( iframeID  獲取iframe對象，可直接操作iframe標簽屬性,如只想改變iframe的 src 或者 border ，scrolling 等attributes ii var dom = frames[ iframeName  獲取iframe的DOM對象，此對象可用來操作對象，比如想操作iframe頁面中的元素。 d 獲取iframe中的window對象 function getIframeWindow(obj) { //IE || w3c return obj.contentWindow || obj.contentDocument.parentWindow; //parentWindow 是 parent window object document.getElementById取到的iframe是不能直接操作里面的document的，只能這樣取： IE:frames[id].document或obj.contentWindow.document; FF:dom.contentDocument或obj.contentDocument;不綁定任何事件. e 獲取iframe頁面高度 function getIframeHeight(obj){ var idoc = getIframeWindow(obj).document;  if(idoc.body){ return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);  }else if(idoc.documentElement){ return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);  f 父子頁面互訪 i 子訪問父： parent.html: body  p 等到的信息： p id= msg /p /p  iframe frameborder= 1 width= 400 height= 400 src= son.html scrolling= no id= myiframe /iframe  /body  son.html: body  input type= button quot;setMsg() value= setMsg  script  function setMsg(){ var msg = window.parent.document.getElementById( msg  msg.innerHTML= Hello world!!  /script  /body  ii 父訪問子： parent.html: body  p 等到的信息： p id= setMsg /p /p  input type= button value= setMsg quot;setMsg() br  iframe frameborder= 1 width= 400 height= 400 src= son.html scrolling= no id= myiframe /iframe  script type= text/javascript  function setMsg(){ var obj = document.getElementById( myiframe  var msg = getIframeWindow(obj).document.getElementById( msg  document.getElementById( setMsg ).innerHTML = msg.innerHTML; /script  /body  son.html: body  p id= msg Hello world!!! /p  /body 

實際使用iframe中，會遇到iframe高度的問題，由于被嵌套的頁面長度不固定而顯示出來的滾動條，不僅影響美觀，還會對用戶操作帶來不便 a 同域下的高度自適應 parent.html: body  iframe width= 400 id= myiframe onload= setHeight() height= 1 frameborder= 0 src= son.html /iframe  script type= text/javascript  function getIframeWindow(obj) { return obj.contentWindow || obj.contentDocument.parentWindow; function getIframeHeight(obj){ var idoc = getIframeWindow(obj).document;  if(idoc.body){ return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);  }else if(idoc.documentElement){ return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);  function setHeight(){  var myiframe = document.getElementById( myiframe  myiframe.height = getIframeHeight(myiframe); /script  /body  另：document.documentElement與document.body相關說明(W3C DOM2.0規范) document.doucmentElement: documentElement of type Element, readonly,This is a convenience attribute that allows direct access to the  child node that is the root element of the document. For HTML documents, this is the element with the tagName HTML . document.body: document.body is the element that contains the content for the document. In documents with body contents, returns the body element,  and in frameset documents, this returns the outermost frameset element. Though body is settable, setting a new body on a document will effectively remove all the current children of the existing body element. IE在怪異模型（Quicks Mode）下document.documentElement無法正確取到clietHeight scrollHeight等值，比如clientHeight=0。 獲取scrollTop: var sTop=Math.max( (document.body?document.body.scrollTop:0), (document.documentElement?document.documentElement.scrollTop:0), (window.pageYOffset?window.pageYOffset:0) b 跨域下高度自適應 index.html:(http://www.csdn.net) iframe width= 400 id= myiframe onload= setHeight() height= 1 frameborder= 0 src= son.html /iframe  son.html: body  iframe id= agentIframe >4.iframe背景透明：
在ie6/7/8下引入iframe的時候，它的背景默認是白色，即使設置了 >但是其他瀏覽器(firefox,chrome,opera,ie9)都正常顯示，要解決這個兼容性問題，必須用到一個屬性。
下面來看看現象：
index.html: body >

結果如下圖：(FF中有滾動條是因為在index.html中設置了有滾動條)
解決：
給iframe設置屬性：allowTransparency=”true” //設置為true允許透明
 body >

備注：iframe不設置此屬性時，可使用iframe解決在IE6、7環境中遮住select
5.判斷頁面中是否有iframe:
 a 首先來看看window.frameElement這個屬性。 返回嵌入當前window對象的元素(比如 iframe 或者 object ),即為包含本頁面的iframe或frame對象。如果當前window對象已經是頂層窗口,則返回null. 看看一個例子： parent.html: body  iframe frameborder= 1 width= 400 height= 400 src= son.html scrolling= no id= myiframe /iframe  /body  son.html:(注意frameElement用在son.html中，如果用在parent.html中,則返回null) body  p id= msg Hello world!!! /p  script type= text/javascript  var iframe = window.frameElement; if(iframe){ iframe.src = http://blog.csdn.net/cuew1987  /script  /body  備注：雖然該屬性名為frameElement,但該屬性也會返回其他類型比如 object 或者其他可嵌入窗口的元素. b 兼容性如下圖：

 c 定義函數： i 判斷父頁面中是否含有iframe function hasIframe(){ return document.getElementsByTagName( iframe ).length  ii 判斷某個頁面是否在iframe標簽中 function innerIframe(){ var iframe = window.frameElement; if(iframe){ return typeof iframe !== undefined  }
6、HTML5中iframe：
HTML 4.01 與 HTML 5 之間的差異在 HTML 5 中，僅僅支持 src 屬性
 iframe src= /index.html /iframe 
HTML5中全局屬性：
7、easyui中form組件提交(包括上傳域)：
 function submitForm(target, options) { options = options || {}; if (options.onSubmit) { if (options.onSubmit.call(target) == false) { return; var form = $(target); if (options.url) { form.attr( action , options.url); var frameId = easyui_frame_ + (new Date().getTime()); var frame = $( iframe id= + frameId + name= + frameId + /iframe ).attr( src , window.ActiveXObject ? javascript:false : about:blank ).css( position : absolute , top : -1000, left : -1000 var t = form.attr( target ), a = form.attr( action  form.attr( target , frameId);//在iframe中提交表單 try { frame.appendTo( body  frame.bind( load , cb); form[0].submit(); } finally { form.attr( action , a); t ? form.attr( target , t) : form.removeAttr( target  var checkCount = 10; function cb() { frame.unbind(); var body = $( # + frameId).contents().find( body  //contents()查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容 var data = body.html(); if (data == ) { if (--checkCount) { setTimeout(cb, 100); return; return; var ta = body.find( textarea  if (ta.length) { data = ta.val(); } else { var pre = body.find( pre  if (pre.length) { data = pre.html(); if (options.success) { options.success(data); setTimeout(function() { frame.unbind(); frame.remove(); }, 100); 另：form 的target屬性： a HTML4中： 定義和用法：target 屬性規定在何處打開 action URL。 兼容性：在 HTML 4.01 中，不贊成使用 form 元素的 target 屬性；在 XHTML 1.0 Strict DTD 中，不支持該屬性。 屬性值： _blank 新窗口中打開 _self 默認，在相同的框架中打開 _parent 父框架中打開 _top 整個窗口中打開 framename 指定的frame name屬性值的框架中打開 b HTML5中： HTML 4.01 與 HTML 5 之間的差異 在 HTML5 中 target 屬性不再是被廢棄的屬性。不再支持 frame 和 frameset。 現在，parent, top 和 framename 值大多用于 iframe。
8、網上問題收集：
a window.frameElement在chrome下undefined?
問題描述：
今天在重新編寫我的日歷組件的時候，由于用到使用iframe自定義屬性傳值，
將父頁面的值寫在iframe 自定義屬性上，然后在iframe頁面中使用 window.frameElement.getAttribute() 獲取，
奇怪的是之前編寫的日歷控件代碼一直都這樣寫，沒有發生過錯誤，但是今天在chrome里面 window.frameElement 竟然是 undefined，
在firefox 甚至IE6下都沒有問題，后來百度沒有答案， 再google 也，沒有答案。
解決：
最后自己根據以往經驗想到或許是本地調試權限問題，于是打開apache使用域名的形式訪問，果然可以了，呵呵！
以上就是html iframe使用的實戰總結分享的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。