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


Posted in Javascript onMarch 29, 2013

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('frame_content'); 
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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 #Javascript
javascript打印大全(打印页面设置/打印预览代码)
Mar 29 #Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 #Javascript
jquery无缝向上滚动实现代码
Mar 29 #Javascript
验证码按回车不变解决方法
Mar 29 #Javascript
Jquery 自定义动画概述及示例
Mar 29 #Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 #Javascript
You might like
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
JS二分查找算法详解
2017/11/01 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
js中url对象化管理分析
2017/12/29 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python函数学习笔记
2008/10/07 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
python 如何停止一个死循环的线程
2020/11/24 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
为什么需要版本控制?
2013/08/08 面试题
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
项目管理计划书
2014/01/09 职场文书
安全生产学习心得体会
2016/01/18 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python