- 浏览: 115656 次
- 性别:
- 来自: 合肥
文章分类
- 全部博客 (86)
- Web Page (23)
- Java (5)
- Web Security (7)
- Cache (0)
- Message (0)
- CAS (3)
- 开源系统 (2)
- my systems (2)
- Apache Chemistry and Jackrabbit (1)
- Jquery (1)
- spring (8)
- 虚拟主机部署 (3)
- ORM (3)
- myeclipse eclipse (5)
- full index (1)
- 公式编辑器 (1)
- 网页编辑器 (1)
- junit4 (1)
- 飞鸽传书 (1)
- centos install (1)
- maven (1)
- hibernate (1)
- tomcat (5)
- eclipse (4)
- 工具 (1)
- mysql (2)
- tomcat jndi + spring配置 (1)
- goagent (0)
- html video (1)
- ckeditor (0)
- getResourceAsStream (1)
- online education project (1)
- Mac (1)
- Chrome (1)
- dev-tool (1)
最新评论
-
107x:
谢谢分享
Eclipse下使用maven开发web项目 -
a604346146:
如果你关闭该界面时,session没有注销,你不能再登录进去, ...
spring security 同步session控制 -
Jekey:
...
已有windows 7下硬盘安装CentOS 6.x
Iframe 自适应3
- 博客分类:
- Web Page
Iframe跨域自适应高度(兼容IE/Firefox)终极解决方案
2011-05-04 18:46:27| 分类: JavaScript | 标签:iframe |字号 订阅
main.html在A域,被包含的iframe.html、proxy.html以及proxy.js在B域
main.html
<script type="text/javascript" src="http://zhaohe162.blog.163.com/blog/B域/proxy.js"></script>
<script type="text/javascript">
var aai=new AutoAdjustIframe();
aai.autoAdjust('frameName');
</script>
<div style="border:1px solid #ccc;padding:10px;">
<iframe id="frameName" name="frameName" src="http://zhaohe162.blog.163.com/blog/B域 /iframe.html?hostname=192.168.1.100:8080" style="width:100%;border:1px solid #f00;" scrolling="no" frameborder="0"></iframe>
</div>
<br/>尾部<br/>
iframe.html
文字<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/>
文字<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/>
文字<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript" src="http://zhaohe162.blog.163.com/blog/proxy.js"></script>
<script type="text/javascript">
var aai=new AutoAdjustIframe();
aai.setHash();
</script>
proxy.html
B域一个空白页面,防止404
proxy.js
var AutoAdjustIframe=function(){
var autoSecond=1;
this.autoAdjust=function(iframeId){
setInterval(function(){
try{
var height=parseFloat(window.frames[iframeId].frames[iframeId+'-proxyiframe'].location.hash.replace(/^#/,''))||100;
document.getElementById(iframeId).style.height=height+'px';
}catch(e){};
},autoSecond);
};
var getHeight=function(){
return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,
document.documentElement.clientHeight,document.body.clientHeight);
};
/*
* 设置代理页的hash值,需要A域传给B域hostname
*/
this.setHash=function(){
var aSearch=document.location.search.match(/hostname=([^&]+)/);
if(!!aSearch){
//设定 代理页面url
var proxyUrl='http://'+aSearch[1]+'/proxy.html';
var height=getHeight();
try{
console.log('proxyUrl:'+proxyUrl+' The Iframe's height:'+height);
}catch(e){};
//生成代理iframe
var iframe=document.createElement('iframe');
iframe.src=proxyUrl+'#'+height;
iframe.id=window.name+'-proxyiframe';
iframe.name=window.name+'-proxyiframe';
iframe.style.display='none';
document.body.appendChild(iframe);
//动态设置代理iframe的hash,以便重新获取新的高度
var interval=setInterval(function(){
if(getHeight()!=height){
height=getHeight();
iframe.src=proxyUrl+'#'+height;
try{
console.log('Reloading,The Iframe's height:'+height);
}catch(e){};
}
},autoSecond);
}
};
};
发表评论
-
CSS 的 margin 很困難
2014-04-21 14:24 1479转自:http://xxxxxly.in/posts/ ... -
禁止浏览器自动填充用户名密码
2014-02-18 22:37 883有时页面字段不希望浏览器自动填充用户名和密码,可以在< ... -
Struts标签中的字符串格式化输出
2013-07-11 08:49 1100转自: http://blog.csdn.net/bzkfn ... -
Eclipse下使用maven开发web项目
2012-07-17 09:37 2148摘抄自: http://www.noday.net/artic ... -
eclipse下struts的maven项目报 Missing artifact com.sun:tools:jar错
2012-07-11 17:51 1802如果项目中使用struts2和mave, 则pom文件可能如下 ... -
onsubmit=return false阻止form表单提交javascript_1
2011-12-01 01:22 1061摘自:http://jackaudrey.blog ... -
防止表单自动提交,以及submit和button提交表单的区别
2011-12-01 01:21 6407转自:http://jackaudrey.blog ... -
ckeditor中文文档——开发者文档(3)配置--配置设置
2011-11-30 13:58 1924---- 摘自:http://blog.csdn.net/lh ... -
为CKEditor添加Readonly按钮和Upload Image按钮
2011-11-30 08:29 1652问题内容 转自:http://cjkz.52bianc ... -
jsp中ckeditor的运用实例及配置
2011-11-22 13:33 689转自: http://hi.baidu.com/%B7%E7 ... -
页面回发后,让页面自动滚动到指定位置的一种简单的方法
2011-11-21 21:39 1047页面回发后,让页面自动滚动到指定位置的一种简单的方法 ... -
常用图标
2011-08-30 17:17 681验证表单 -
表单验证提示信息
2011-08-30 17:14 1998<!DOCTYPE html PUBLIC " ... -
tip help--js带箭头的提示框
2011-08-30 16:56 1600<!DOCTYPE html PUBLIC " ... -
div move
2011-08-30 16:17 787<!DOCTYPE html PUBLIC " ... -
验证码Jcaptcha .
2011-08-30 15:58 712http://blog.csdn.net/sz_bdqn/ar ... -
十大最佳Ajax教程(转)
2011-07-12 10:15 795转自:http://news.csdn.net/a/20100 ... -
iframe高度自适应2
2011-07-10 22:09 590http://www.fufuok.com/adaptive- ... -
iframe高度自适应1(转)
2011-07-10 22:08 1112转自:http://www.kuqin.com/w ... -
(转)16个Javascript表单事件脚本(表单验证、选择)
2011-07-09 22:58 90016个JavaScript 表单事件脚本, 含jQu ...
相关推荐
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自适应高度和宽度
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
纯JS实现的iframe自适应高度。兼容主流浏览器。
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iframe自适应高度(兼容多种浏览器) 亲测可以
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
多层嵌套iframe 自适应高度的解决方法
IFRAME 自适应 页面布局 自适应高度
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
iframe自适应高度
javascript iframe 自适应高度js demo
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
iframe自适应高度的简单解决办法,word文档中有详细的解释,赶快下载吧!
iframe自适应高度 .doc
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
iframe包含的页面的高度,兼容性好,iframe高度自适应
iframe自适应高度(DOM动态操作)
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板