iframe 自动高、宽度设置 总结
- 博客分类:
- 技术杂绘
function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument; if(ifm != null && subWeb != null) { ifm.height = subWeb.body.scrollHeight; } } ================================================== ===================================== ================================================== ===================================== function resize(){var h=50; try{ if(ifr_lb&&ifr_lb.document&&ifr_lb.document.body){ var o=ifr_lb.document.body; var h=o.scrollHeight + (typeof(o.clientTop)== 'number' ?o.clientTop * 2 : 0);} } catch(e){var h=50;window.status=e.description;} if(h ================================================== ==================================== function reinitIframe(){ var iframe = document.getElementById("frame_content"); try{ iframe.height = iframe.contentWindow.document.documentElement.scro llHeight; }catch (ex){} } window.setInterval("reinitIframe()", 200); Check Height function checkHeight() { var iframe = document.getElementById("frame_content"); var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scro llHeight; alert("bHeight:" + bHeight + ", dHeight:" + dHeight); } Toggle Overlay function toggleOverlay() { var overlay = document.getElementById('overlay'); overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none'; } function reinitIframe(){var iframe = document.getElementById("frame_content"); try{ var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scro llHeight; var height = Math.max(bHeight, dHeight); iframe.height = height; }catch (ex){} } window.setInterval("reinitIframe()", 200); 最终代码
function reinitIframe(){
var iframe = document.getElementById("frame_content");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scro llHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
================================================== ==================================
用到了CSS的text-shadow属性。IE全系列都不支持,火狐、chrome都支持。
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性;text-shadow:阴影水平偏移值(可取正负值); 阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
marginHeight="100%" ====自动宽度 火狐和IE下
================================================== =================================
引入代理代理页面c.html与a.html所属相同域A,c.html是A域下提供好的中间代理页面,假设c.html的地址:www.taobao.com/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.
代码如下:
a.html代码
首先a.html中通过iframe引入了b.html b.html代码
var b_width = Math.max(document.documentElement.clientWidth,docu ment.body.clientWidth);
var b_height = Math.max(document.documentElement.clientHeight,doc ument.body.clientHeight);
var c_iframe = document.getElementById("c_iframe"); //liehuo.net
c_iframe.src = c_iframe.src+"#"+b_width+"|"+b_height; //http://www.taobao.com/c.html#width|height"
}
c.html代码
var b_iframe = parent.parent.document.getElementById("b_iframe");
var hash_url = window.location.hash;
var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
b_iframe.style.width = hash_width;
b_iframe.style.height = hash_height;
发表评论
-
windows编程中字符和字符串的处理
2012-07-06 09:52 599字符格式基础 首先说说字符编码的两种格式。 一种是 ... -
JavaScript中的正则表达式:
2012-07-06 09:45 566JavaScript中的正则表达式 : 格式:/pa ... -
java的正则表达式 (基于官方帮助文档做部分说明)
2012-07-06 09:37 553[/b][b]下面这段代码用了log4j,去下个log4j ... -
jQuery 中的filter 运用
2012-07-06 09:30 728无标题页 skin/MaiNaEr/ ... -
android--UI组件总结
2012-07-03 13:43 465android的组件基本都按如下方法生成: 1、生成一 ... -
FLEX程序如何改变程序中单个动画的帧速
2012-07-02 10:48 479在Flex程序中,必须有一个主程序组件,相当于C语言中的m ... -
Flex中如何利用FocusManager类的setFocus函数设置TextInput的焦点的例子
2012-07-02 10:48 641接下来的例子演示了Flex中如何利用FocusManage ... -
Flex 监听键盘事件
2012-07-02 10:48 580一、说明 1、只有当监听的对象获取焦点后,才能出接收 ... -
Cross-domain policy和/WEB-INF/flex/proxy-config.xml
2012-07-02 10:47 692从flash 7开始,不同域名的资源访问受到限制,比如a. ... -
B2B2C网上商城开发指南――基于SaaS和淘宝API开放平台
2012-07-01 00:26 440B2B2C网上商城开发指南--基于SaaS和淘宝AP ... -
拥抱RIA拥抱未来
2012-07-01 00:26 552学习和使用RIA已有一段时间了,结合实际工作、谈谈自己的见 ... -
基于WebService+Flex的B/S系统架构
2012-07-01 00:26 601系统采用标准的三层架构 展现层/业务逻辑/数据层 展 ... -
屏蔽Flex右键的一些解决方案
2012-07-01 00:26 592一直以来对Flex或者说Flash的右键就存在一些不好的印 ... -
学习Flex,都学些什么
2012-07-01 00:26 558学习Flex,都学些什么呢? 1、首先是事件机制,整 ...
相关推荐
在用js动态创建时,iframe 很难自动适应高度宽度,写100%也没有,推出此方法可以解决这方面难题
iframe自适应高度和宽度
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iFrame 自动调整高度 绝对有效! 分可能是高咯滴滴儿....不过一分钱一分货哈,没效果你骂我、使劲骂!
iframe根据引用的页面内容自适应高度和宽度,直接查看例子,简单易操作
iframe自动适应高度
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
让嵌入到HTML的iframe自动适应大小
iframe自动改变高度 朝好用的一个框架 我就在用
iframe自动适应高度,很难得的资源,很多下载的都是部分浏览器可以用,这个可以兼容360.ie6789等,遨游,火狐。搜狗等浏览器。。亲自测试。
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
本文实例讲述了jQuery获取与设置iframe高度的方法。分享给大家供大家参考,具体如下: 设置iframe的高度,iframe的高度由iframe中的页面高度决定。 1.首先获取到iframe中页面的高度: 复制代码 代码如下:var iframe...
一些关于iframe自适应高度的介绍,一些关于iframe自适应高度的介绍
根据iframe内容高度自适应。不能确保所有的地方都能通用,但是大部分地方都能适用。
iframe高度自适应。点击链接载入网页,脚本检测iframe页面高度并动态增加父页面高度
iframe包含的页面的高度,兼容性好,iframe高度自适应
兼容IE 6+ 、火狐、谷歌、等浏览器的Javascript 自动适应高的的IFrame
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...