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 相关文章推荐
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
node.js中的fs.statSync方法使用说明
Dec 16 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
Vue核心概念Getter的使用方法
Jan 18 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
详细聊聊vue中组件的props属性
Nov 02 Vue.js
图片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
咖啡与牛奶
2021/03/03 冲泡冲煮
DedeCms模板安装/制作概述
2007/03/11 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
如何使用angularJs
2017/05/08 Javascript
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python安装与使用redis的方法
2016/04/19 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python pip配置国内源的方法
2020/02/14 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
用python写PDF转换器的实现
2020/10/29 Python
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
学校志愿者活动总结
2014/06/27 职场文书
情况说明书怎么写
2015/10/08 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Java Redisson多策略注解限流
2022/09/23 Java/Android