html iframe使用的实战总结分享

   注：测试环境IE：8.0，FF：23.0.1   a>隐藏iframe表框i>标签中设置：frameborder="0",ii>DOM操作：var myiframe = document.getElementById("myiframe");myiframe.style.border="none";//FF下有效，IE下无效 myiframe.setAttribute("frameborder",0);//FF下有效，IE下无效 myiframe.frameBorder = 0;//FF下有效，IE下无效    b>动态创建iframe   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);      c>获取iframei>var obj = document.getElementById("iframeID");  获取iframe对象，可直接操作iframe标签属性,如只想改变iframe的 src 或者 border ，scrolling 等attributesii>var dom = frames["iframeName"];   获取iframe的DOM对象，此对象可用来操作对象，比如想操作iframe页面中的元素。    d>获取iframe中的window对象function getIframeWindow(obj) {//IE || w3creturn 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:
等到的信息：
son.html:function setMsg(){var msg = window.parent.document.getElementById("msg");msg.innerHTML= "Hello world!!";}ii>父访问子：parent.html:
等到的信息：

function setMsg(){var obj = document.getElementById("myiframe");var msg = getIframeWindow(obj).document.getElementById("msg");document.getElementById("setMsg").innerHTML = msg.innerHTML;}son.html:
Hello world!!!

实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用户操作带来不便a>同域下的高度自适应parent.html:  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);}  另：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  contents, returns the  element, and in frameset documents, this returns the outermost  element.Though body is settable, setting a new body on a document will effectively remove all the current children of the existing  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)son.html:function getHeight(){var idoc = 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);   }}window.onload = function(){var h = getHeight();document.getElementById("agentIframe").src="http://www.csdn.net#"+h;}agent.html:(http://www.csdn.net)(function(){var con = parent.parent.document.getElementById('frame_content');     var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;      con.style.height = href.split("#")[1]+"px";})();

index.html:

a>首先来看看window.frameElement这个属性。返回嵌入当前window对象的元素(比如  或者