场景：Iframe嵌入flash,希望flash能随着页面的resize而resize。

主要代码：

代码

  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • <html>
  • <head>
  • <title> New Document </title>
  • <meta name="Generator" content="EditPlus">
  • <meta name="Author" content="">
  • <meta name="Keywords" content="">
  • <meta name="Description" content="">
  • <script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script>
  • <script type="text/javascript">
  • var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml';
  • function setAppFrameUrl(selectedUrl) {
  • if ($.isReady) {
  • activeUrl = selectedUrl;
  • $('#appFrame' ).setAttribute('src', selectedUrl);
  • } else {
  • setTimeout(function() {
  • setAppFrameUrl(selectedUrl);
  • }, );
  • }
  • }
  • function setNewActive(imgComp,urlName,imageSrc){
  • setAppFrameUrl(urlName);
  • imgComp.src = imageSrc;
  • }
  • $(document).ready(function(){
  • $(window).resize(resizeframe);
  • });
  • function resizeframe()
  • {
  • var margin-top = $('#appFrame' ).css( "margin-top" );
  • var topNum = margin-top.toString().slice(,margin-top.length-);
  • var actualHeight = document.body.offsetHeight - topNum;
  • $('#appFrame').css('height', actualHeight);
  • }
  • </script>
  • </head>
  • <body>
  • <div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999">
  • <a id="j_idt8">
  • <img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;"
  • onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/>
  • </a>
  • .
  • .
  • .
  • .
  • </div>
  • <iframe id="appFrame" style="border: ;
  • width: %;
  • position: absolute;
  • top: ;
  • left: ;
  • margin-top: 43px;" src="" scrolling="auto" frameborder="" onload="resizeframe()">
  • </iframe>
  • </body>
  • </html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

<meta name="Generator" content="EditPlus">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script>

<script type="text/javascript">

var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml';

function setAppFrameUrl(selectedUrl) {

if ($.isReady) {

activeUrl = selectedUrl;

$('#appFrame' ).setAttribute('src', selectedUrl);

} else {

setTimeout(function() {

setAppFrameUrl(selectedUrl);

}, 100);

}

}

function setNewActive(imgComp,urlName,imageSrc){

setAppFrameUrl(urlName);

imgComp.src = imageSrc;

}

$(document).ready(function(){

$(window).resize(resizeframe);

});

function resizeframe()

{

var margin-top = $('#appFrame' ).css( "margin-top" );

var topNum = margin-top.toString().slice(0,margin-top.length-2);

var actualHeight = document.body.offsetHeight - topNum;

$('#appFrame').css('height', actualHeight);

}

</script>

</head>

<body>

<div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999">

<a id="j_idt8">

<img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;"

onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/>

</a>

</div>

<iframe id="appFrame" style="border: 0;

width: 100%;

position: absolute;

top: 0;

left: 0;

margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()">

</iframe>

</body>

</html>

分析：

首先导入JQuery框架，并设置iframe的scrolling="auto",这样的话可以自动的出现滚动条。

然后添加window的resize事件

代码

  1. $(document).ready(function(){
  2. $(window).resize(resizeframe);
  3. });
  4. function resizeframe()
  5. {
  6. var margin-top = $('#appFrame' ).css( "margin-top" );
  7. var topNum = margin-top.toString().slice(,margin-top.length-);
  8. var actualHeight = document.body.offsetHeight - topNum;
  9. $('#appFrame').css('height', actualHeight);
  10. }

$(document).ready(function(){

$(window).resize(resizeframe);

});

function resizeframe()

{

var margin-top = $('#appFrame' ).css( "margin-top" );

var topNum = margin-top.toString().slice(0,margin-top.length-2);

var actualHeight = document.body.offsetHeight - topNum;

$('#appFrame').css('height', actualHeight);

}

这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果。

后来有人给出了一个另外的解决方案，跟这个原理类似，也贴出来以供参考。

Js代码

  1. var suiteVisible = true;
  2. function resizeIframe() {
  3. var el = document.getElementById("appFrame");
  4. if (suiteVisible) {
  5. el.style.height = (document.body.clientHeight - 43) + "px";
  6. }
  7. else {
  8. el.style.height = (document.body.clientHeight) + "px";
  9. }
  10. }
  11. $(window).resize(function() {
  12. if (this.resizeTO)
  13. clearTimeout(this.resizeTO);
  14. this.resizeTO = setTimeout(function() {
  15. $(this).trigger('resizeEnd');
  16. }, 500);
  17. });
  18. $(window).bind('resizeEnd', function() {
  19. resizeIframe();
  20. });

var suiteVisible = true;

function resizeIframe() {

var el = document.getElementById("appFrame");

if (suiteVisible) {

el.style.height = (document.body.clientHeight - 43) + "px";

}

else {

el.style.height = (document.body.clientHeight) + "px";

}

}

$(window).resize(function() {

if (this.resizeTO)

clearTimeout(this.resizeTO);

this.resizeTO = setTimeout(function() {

$(this).trigger('resizeEnd');

}, 500);

});

$(window).bind('resizeEnd', function() {

resizeIframe();

});

几行JavaScript代码搞定Iframe 自动适应的更多相关文章

  1. 5行js代码搞定导航吸顶效果

    一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...

  2. 180行ruby代码搞定游戏2048

    最今在玩2048这款小游戏,游戏逻辑简单,很适合我这样的对于游戏新入行的人来实现逻辑.于是选择了最拿手的ruby语言来实现这款小游戏的主要逻辑.还是挺简单的,加起来4小时左右搞定. 上代码: requ ...

  3. 200行Java代码搞定计算器程序

    发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示 ...

  4. 【备忘】windows环境下20行php代码搞定音频裁剪

    先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...

  5. 80行Python代码搞定全国区划代码

    微信搜索:码农StayUp 主页地址:https://gozhuyinglong.github.io 源码分享:https://github.com/gozhuyinglong/blog-demos ...

  6. 3kb jQuery代码搞定各种树形选择。

    自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * ...

  7. 10行代码搞定移动web端自定义tap事件

    发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...

  8. 30行代码搞定WCF并发性能测试

    [以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main()         {               List< ...

  9. 开源作品ThinkJDBC—一行代码搞定数据库操作

    1 简介 ThinkJD,又名ThinkJDBC,一个简洁而强大的开源JDBC操作库.你可以使用Java像ThinkPHP框架的M方法一样,一行代码搞定数据库操作.ThinkJD会自动管理数据库连接, ...

随机推荐

  1. PHP接入微信H5支付

    开发前配置 进行代码接入前,需在微信后台填写授权回调域名,此域名必须经过ICP备案 开发主要流程 用户下单时选择微信支付 商户进行业务逻辑处理并调用微信统一下单接口,微信H5交易类型为:trade_t ...

  2. awk 提取列

    awk '{OFS="";print(substr($0,1,6),substr($0,74,18),substr($0,15,3),substr($0,18,8))}' inpu ...

  3. 关于socket知识整理

    一个完整的计算机系统是由硬件.操作系统.应用软件三者组成,具备了这三个条件,一台计算机系统就可以玩单机游戏.如果你想上网(访问个黄色网站,发个黄色微博啥的),就需要遵守网络协议,即计算机之间交流的标准 ...

  4. [BZOJ4570][SCOI2016]妖怪(凸包)

    两种做法,前一种会TLE. 第一种是高一数学题做法,设一个妖怪的atk和dnf分别为x和y,则它在(a,b)环境下的战斗力为x+y/a*b+y+x/a*b. 设t为b/a,则战斗力即$f(x,y,t) ...

  5. [BJOI2010]次小生成树

    OJ题号: BZOJ1977.COGS2453 题目大意: 给你一个无向连通图,求严格次小生成树. 思路: 对于一般次小生成树,我们有一个结论:一般次小生成树一定可以通过替换掉最小生成树某一条边得到. ...

  6. [SPOJ-BEADS]Glass Beads

    来源: CE1998 题目大意: 求字符串最小表示. 思路: 字符串复制一遍接在后面,构建SAM,然后每次跑小的转移. 跑n次以后就跑到了最小表示的末尾,用该状态的len值减去n就是最小表示的起始位置 ...

  7. N！（N的阶乘）最末位非0的求解方法

    问题是求关于N!的最后一位非0位, 如3!=6,最后一位非0位为6, 5!=120, 最后一位非0位为2.怎么样快速的求出最后一位非0位呢? 最朴素的想法就是先求出N!的结果,再求出结果的最后一位非0 ...

  8. UVA 2474 - Balloons in a Box 爆搜

    2474 - Balloons in a Box 题目连接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&a ...

  9. spring---aop（7）---Spring AOP中expose-proxy介绍

    写在前面 expose-proxy.为是否暴露当前代理对象为ThreadLocal模式. SpringAOP对于最外层的函数只拦截public方法,不拦截protected和private方法(后续讲 ...

  10. C#监控文件夹变化

    当需要监控某一文件,FileSystemWatcher类提供了Created, Deleted,Rename等事件. 就拿FileSystemWatcher的Created事件来说,该事件类型是Fil ...