iframe使⽤总结（实战）
说在前⾯的话，iframe是可以做很多事情的。
例如：
a>通过iframe实现跨域;
b>使⽤iframe解决IE6下select遮挡不住的问题
c>通过iframe解决Ajax的前进后退问题
d>通过iframe实现异步上传。(Easyui中form组件就是⽤的iframe，实现表单提交时，可以提交上传域)
下⾯就⼀些问题⼀⼀论述。
1、iframe基本知识：
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>
可选属性：
标准属性：
2、操作iframe：
注：测试环境IE：8.0，FF：23.0.1
a>隐藏iframe表框
i>标签中设置：frameborder="0",<iframe frameborder="0" width="400" height="400" src="blog.csdn/cuew1987" scrolling="no"></iframe> ii>DOM操作：
<body>
<iframe frameborder="1" width="400" height="400" src="blog.csdn/cuew1987" scrolling="no" id="myiframe"></iframe>
<script>
var myiframe = ElementById("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 = ateElement("iframe");
newFrame.src ="blog.csdn/cuew1987";
newFrame.frameBorder = 0;//FF、IE隐藏边框有效
newFrame.width = "400px";
newFrame.height = "400px";
newFrame.scrolling = "no";
document.body.appendChild(newFrame);
iframe嵌套页面加载慢</script>
c>获取iframe
i>var obj = ElementById("iframeID");
获取iframe对象，可直接操作iframe标签属性，如只想改变iframe的 src 或者 border ，scrolling 等attributes
ii>var dom = frames["iframeName"];
获取iframe的DOM对象，此对象可⽤来操作对象，⽐如想操作iframe页⾯中的元素。
d>获取iframe中的window对象
function getIframeWindow(obj) {
//IE || w3c
tWindow || tDocument.parentWindow;
//parentWindow 是 parent window object
}
IE:frames[id].document或tWindow.document;
IE:frames[id].document或tWindow.document;
tDocument或tDocument；不绑定任何事件.
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>
<div>等到的信息：<div id="msg"></div></div>
<iframe frameborder="1" width="400" height="400" src="son.html" scrolling="no" id="myiframe"></iframe>
</body>
son.html:
<body>
<input type="button" onClick="setMsg()" value="setMsg">
<script>
function setMsg(){
var msg = window.ElementById("msg");
msg.innerHTML= "Hello world!!";
}
</script>
</body>
ii>⽗访问⼦：
parent.html:
<body>
<div>等到的信息：<div id="setMsg"></div></div>
<input type="button" value="setMsg" onClick="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 = ElementById("myiframe");
var msg = getIframeWindow(obj).ElementById("msg");
}
</script>
</body>
son.html:
<body>
<div id="msg">Hello world</div>
</body>
3.iframe⾼度⾃适应和跨域：
实际使⽤iframe中，会遇到iframe⾼度的问题，由于被嵌套的页⾯长度不固定⽽显⽰出来的滚动条，不仅影响美观，还会对⽤户操作带来不便 a>同域下的⾼度⾃适应
parent.html:
<body>
<iframe width="400" id="myiframe" οnlοad="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
<script type="text/javascript">
function getIframeWindow(obj) {
tWindow || tDocument.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);
return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);
}
}
function setHeight(){
var myiframe = ElementById("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:(www.csdn)
<iframe width="400" id="myiframe" οnlοad="setHeight()" height="1" frameborder="0" src="son.html"></iframe>
son.html:
<body >
<iframe id="agentIframe" height="10" width="100%"></iframe>
</body>
<script>
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);
}
}
var h = getHeight();
}
</script>
agent.html:(www.csdn)
<script>
(function(){
var con = parent.ElementById('frame_content');
var href = parent.parent.frames["frame_content"].frames["iframeC"].location.hash;
con.style.height = href.split("#")[1]+"px";
})();
</script>
4.iframe背景透明：
在ie6/7/8下引⼊iframe的时候，它的背景默认是⽩⾊，即使设置了style=”background-color:transparent;”也⽆效，
但是其他浏览器(firefox,chrome,opera,ie9)都正常显⽰，要解决这个兼容性问题，必须⽤到⼀个属性。
下⾯来看看现象：
index.html:
<body >
<iframe frameborder="0" height="200" width="200" src="son.html" scrolling="yes" id="myiframe"
></iframe>
</body>
结果如下图：(FF中有滚动条是因为在index.html中设置了有滚动条)
解决：
给iframe设置属性：allowTransparency=”true” //设置为true允许透明
<body >
<iframe allowTransparency="true" frameborder="0" height="200" width="200" src="son.html"
scrolling="yes" id="myiframe"></iframe>
</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>
<div id="msg">Hello world</div>
<script type="text/javascript">
var iframe = window.frameElement;
if(iframe){
iframe.src = "blog.csdn/cuew1987";
}
</script>
</body>
备注：虽然该属性名为frameElement，但该属性也会返回其他类型⽐如 <object> 或者其他可嵌⼊窗⼝的元素.
b>兼容性如下图：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论