首页 > web前端 > js教程 > 正文

JavaScript 处理Iframe自适应高度(同或不同域名下)

高洛峰
发布: 2017-01-09 09:20:12
原创
1151 人浏览过

1.同域名下Iframe自适应高度的处理 

<iframe onload="Javascript:SetIFrameHeight(this)" src="../Home/b" id="win" name="win" width="100%" height="1"> </iframe>
登录后复制

当然此处我用的是Asp.Net MVC 此处src设置为路由结构

<script type="text/javascript"> 
function SetIFrameHeight(obj) { 
var win = obj; 
if (document.getElementById) { 
if (win && !window.opera) { 
if (win.contentDocument && win.contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
else if (win.Document && win.Document.body.scrollHeight) 
win.height = win.Document.body.scrollHeight; 
} 
} 
} 
</script>
登录后复制

用到的就是iframe嵌套的页面加载完毕的时候,运用onload事件来获取嵌套在iframe中网页的高度,然后赋值给Iframe的高度即可。
2.跨域时Iframe高度自适应

在主页面和被嵌套的iframe为不同域名的时候,就稍微麻烦一些,需要避开JavaScript的跨域限制。 
原理:现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个,通过main.html(域名为http://www.ccvita.com)嵌套iframe.html(域名为:http://www.phpq.net),当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度,agent.html(域名为:http://www.ccvita.com)取得传递的高度,通过JavaScript设置main.html中iframe的高度。最终实现预期的目标。 

iframe主页面main.html 
[code] 
< !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><title>iframe主页面</title></head> 
<body> 
<div style="border:1px solid #ccc;padding:10px;"> 
<iframe id="frame_content" name="frame_content" src="iframe.html" width="100%" height="0" scrolling="no" frameborder="0"></iframe> 
</div> 
<br />尾部<br /> 
</body> 
</html>
登录后复制

iframe嵌套页面iframe.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><title>被iframe嵌套页面</title></head> 
<body> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
文字<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe> 
<script type="text/javascript"> 
function sethash(){ 
hashH = document.documentElement.scrollHeight; 
urlC = "agent.html"; 
document.getElementByIdx("iframeC").src=urlC+"#"+hashH; 
} 
window.onload=sethash; 
</script> 
</body> 
</html>
登录后复制

iframe中介页面agent.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><title>iframe中介页面</title></head> 
<body> 
<script> 
function pseth() { 
var iObj = parent.parent.document.getElementByIdx(&#39;frame_content&#39;); 
iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; 
iObj.style.height = iObjH.split("#")[1]+"px"; 
} 
pseth(); 
</script> 
</body> 
</html>
登录后复制

代码里,kimi可能路径表示不全 
main.html 与 agent.html 是必须同一个域里 
而iframe.html在另一个域


更多JavaScript 处理Iframe自适应高度(同或不同域名下)相关文章请关注PHP中文网!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!