- 浏览: 2107074 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1878)
- [网站分类]ASP.NET (141)
- [网站分类]C# (80)
- [随笔分类]NET知识库 (80)
- [随笔分类]摘抄文字[非技术] (3)
- [随笔分类]养生保健 (4)
- [网站分类]读书区 (16)
- [随笔分类]赚钱 (7)
- [网站分类].NET新手区 (233)
- [随笔分类]网站 (75)
- [网站分类]企业信息化其他 (4)
- [网站分类]首页候选区 (34)
- [网站分类]转载区 (12)
- [网站分类]SQL Server (16)
- [网站分类]程序人生 (7)
- [网站分类]WinForm (2)
- [随笔分类]错误集 (12)
- [网站分类]JavaScript (3)
- [随笔分类]小说九鼎记 (69)
- [随笔分类]技术文章 (15)
- [网站分类]求职面试 (3)
- [网站分类]其他技术区 (6)
- [网站分类]非技术区 (10)
- [发布至博客园首页] (5)
- [网站分类]jQuery (6)
- [网站分类].NET精华区 (6)
- [网站分类]Html/Css (10)
- [随笔分类]加速及SEO (10)
- [网站分类]Google开发 (4)
- [随笔分类]旅游备注 (2)
- [网站分类]架构设计 (3)
- [网站分类]Linux (23)
- [随笔分类]重要注册 (3)
- [随笔分类]Linux+PHP (10)
- [网站分类]PHP (11)
- [网站分类]VS2010 (2)
- [网站分类]CLR (1)
- [网站分类]C++ (1)
- [网站分类]ASP.NET MVC (2)
- [网站分类]项目与团队管理 (1)
- [随笔分类]个人总结 (1)
- [随笔分类]问题集 (3)
- [网站分类]代码与软件发布 (1)
- [网站分类]Android开发 (1)
- [网站分类]MySQL (1)
- [网站分类]开源研究 (6)
- ddd (0)
- 好久没写blog了 (0)
- sqlserver (2)
最新评论
-
JamesLiuX:
博主,能组个队么,我是Freelancer新手。
Freelancer.com(原GAF – GetAFreelancer)帐户里的钱如何取出? -
yw10260609:
我认为在混淆前,最好把相关代码备份一下比较好,不然项目完成后, ...
DotFuscator 小记 -
日月葬花魂:
大哥 能 加我个QQ 交流一下嘛 ?51264722 我Q ...
web应用程序和Web网站区别 -
iaimg:
我想问下嵌入delphi写的程序总是出现窗体后面感觉有个主窗体 ...
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部 -
iaimg:
代码地址下不了啊!
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部
经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度,这就要求 页面必须具有自适应功能。自适应思想比较简单:就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作,因此对于不同域名的自适应解决方案有所不同,主要是在解决跨域问题。
对于同父级域名下的自适应高度:www.chinaz.com/index.html 页面中嵌入www.chinaz.com/xxx.html页面
1.0 http://jipiao.taobao.com/index.htm中关键代码
<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe> |
页面增加如下JS:
<mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _getDomain(); })(); // --></mce:script> |
2.子页面http://www.chinaz.com/xxx.htm 中嵌入如下代码。即可
<mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } window.onload = function() { //设置子页面的域 document.domain=_getDomain(); function _setHeight() { if (window.parent != window) { try { //设置父级iframe的高度 parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px'; } catch(e) { } } //每隔2s设置一次,主要为了兼容子页面加载完毕之后高度再变化 setTimeout(_setHeight,2000); } //子页面加载完毕之后调用一次 _setHeight(); } })(); // --></mce:script> |
不同父级页面,例如www.chinaz.com, book.chinaz.com域名完全不一样,解决办法是使用一个代理页面www.chinaz.com/proxy.htm www.chinaz.com/index.htm页面嵌入 book.chinaz.com/xxxx.htm,而xxx.htm需要隐藏嵌入www.chinaz.com/proxy.htm做为代理,可以将高度写在后面www.chinaz.com/proxy.htm#500,表示500px高度。
1.www.chinaz.com/index.htm页面中关键代码:
<iframe id="J_selfAdapting" src="http://www.chinaz.com/xxxx.htm" mce_src="http://www.chinaz.com/xxxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe> |
增加如下JS:
|
2. www.chinaz.com/xxxx.htm 中关键代码:
<iframe scrolling="no" frameborder="0" style="display: none;" mce_style="display: none;" src="http://www.chinaz.com/proxy.htm#597" mce_src="http://www.chinaz.com/proxy.htm#597" id="taobaoIframe"> </iframe> |
<mce:script type="text/javascript"><!-- (function(){ var pageHeight = document.body.scrollHeight; document.getElementById('taobaoIframe').src = 'http://www.chinaz.com/proxy.htm#' + pageHeight; })(); // --></mce:script> |
3.在代理页面book.chinaz.com/proxy.htm中所有的代码如下:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> </head> <body> <mce:script type="text/javascript"><!-- (function(){ /** * 获取当前域 **/ function _getDomain(){ var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split("."); var _len = _hosts.length; if(_len>2){ return _hosts[_len-2]+"."+_hosts[_len-1]; } return _hostname; } document.domain = _getDomain(); var height = window.location.hash.substring(1); try{ var el = window.top.document.getElementById('J_selfAdapting'); if(el) { el.style.height = height + 'px'; } } catch (e) {} })(); // --></mce:script> </body> </html> |
发表评论
-
常用Web Service汇总(天气预报、时刻表等)
2010-07-15 23:10 912下面总结了一些常用的Web Service,是平时乱逛时收集的 ... -
常用Web Service汇总(天气预报、时刻表等)
2010-07-15 23:10 812下面总结了一些常用的Web Service,是平时乱逛时收集的 ... -
读blog小记
2009-11-06 10:13 7251.Google Books开始收录更多杂志,全部内容都可浏览 ... -
.NET 产品版权保护方案 (.NET源码加密保护)
2009-12-28 15:18 942说明:你希望自己用.net ... -
[转]CTO谈豆瓣网和校内网技术架构变迁
2009-12-29 11:05 949<!--done--> 豆瓣网CTO洪强 ... -
数据采集基类[转]
2010-01-12 18:01 802using System;using System.Data; ... -
.NET牛人应该知道些什么(转)?
2010-01-13 10:52 837何一个使用.NET的人 描述线程与进程的区别? 什么是Wi ... -
cuteEditor 配置
2010-01-13 23:54 15001、拷贝文件 (1)将CuteEditor、Bin文件夹下 ... -
纯CSS星级评价
2010-01-14 16:37 1139做一个星级评价的功能不是很难,但是要单纯用CSS写估计就 ... -
关于伪静态和真静态的一点心得
2010-01-16 23:30 11871.关于伪静态的用处 ... -
认证,授权2
2010-01-18 10:45 889以前对这部分一直糊涂着,总算理理清楚了包名:System.Se ... -
关于集合类的做法示例 实体类赋值 cnblogs
2010-01-22 10:31 925关于集合类的做法 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 647使用Visual Studio 2005(Visu ... -
Godaddy自带免费10G空间开通完全教程
2010-01-29 23:56 1072在Godaddy注册的域名都会自带一个免费的10G空间,虽然有 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 833使用Visual Studio 2005(Visu ... -
Godaddy自带免费10G空间开通完全教程
2010-01-29 23:56 691在Godaddy注册的域名都会自带一个免费的10G空间,虽然有 ... -
关于伪静态和真静态的一点心得
2010-01-16 23:30 7731.关于伪静态的用处 ... -
认证,授权2
2010-01-18 10:45 828以前对这部分一直糊涂着,总算理理清楚了包名:System.Se ... -
关于集合类的做法示例 实体类赋值 cnblogs
2010-01-22 10:31 940关于集合类的做法 ... -
无法在Web服务器上启动调试。与Web服务器通信时出现身份验证错误
2010-01-29 14:46 1051使用Visual Studio 2005(Visu ...
相关推荐
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
JAVASCRIPT让IFRAME框架的高度自适应
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iframe跨域嵌套自适应高度 iframe跨域嵌套 丢失session值(针对嵌套asp.net 做的网站)
iframe包含的页面的高度,兼容性好,iframe高度自适应
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe自适应高度和宽度
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值。分享给大家供大家参考之用。具体方法如下: 该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery。 父页面里面相对简单...
js控制 Iframe 框架自适应被嵌入页面高度
Iframe框架高度自适应的实现.doc
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。
多层嵌套iframe 自适应高度的解决方法
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
iframe自动适应高度,很难得的资源,很多下载的都是部分浏览器可以用,这个可以兼容360.ie6789等,遨游,火狐。搜狗等浏览器。。亲自测试。
这是关于iframe使用过程中出现的问题整理的解决方法,关于使用iframe不用单独写接口打通数据,直接把数据通过ifarme嵌套方法传递过去,使用简单方便。