场景：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. git 相关资料应当查看廖雪峰所写的网站

    廖雪峰关于git的网站 https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/0013 ...

  2. Acer宏碁暗影骑士3进阶版无法进入系统引导修复

    1.刚开机时,按住alt不放,不停点击F10进入恢复系统: 2.点击疑难解答,选择cmd: 3.以下是cmd命令,//注释不要复制 c: //进入C盘 cd windows cd system32 b ...

  3. lamp 5.6.36 bug记录

    后来发现另一个问题,php文字水印中文是乱码. 用yum安装lamp环境详见:https://blog.csdn.net/u010071211/article/details/80370201 在ce ...

  4. poj3537 Crosses and Crosses 博弈论

    大意: 给定一个\(1 * n\)的棋盘,你和对手轮流在上面画"X" 当出现三个连续的X时,最后一步操作的人胜利 不难发现,在棋盘中画了一个X之后 问题等价于两个一样的子游戏 然后 ...

  5. [CC-SEINC]Sereja and Subsegment Increasings

    [CC-SEINC]Sereja and Subsegment Increasings 题目大意: 有长度为\(n(n\le10^5)\)的序列\(A\)和\(B\). 在一次操作中,可以选择一个区间 ...

  6. MAC下安装多版本JDK和切换几种方式

    环境: MAC AIR,OS X 10.10,64位   历史: 过去 Mac 上的 Java 都是由 Apple 自己提供,只支持到 Java 6,并且OS X 10.7 开始系统并不自带(而是可选 ...

  7. bzoj 4033

    树形DP,dp[i][j]表示i子树中,选了j个白点,i子树中所有边的贡献. /************************************************************ ...

  8. window.open如何返回值给父窗口

    父窗口代码 function showMyWindowNew() { var iTop = (window.screen.availHeight - 30 - 450) / 2; //获得窗口的水平位 ...

  9. SlickOne敏捷开发框架介绍（一） -- 基于Dapper, Mvc和WebAPI 的快速开发框架

    前言:在两年前(最初发布时间:2013年1月9日(csdn),当前文章时间2015年11月10日),项目组推出了基于Dapper,Mvc和WebApi的快速开发框架,随着后续Slickflow产品的实 ...

  10. ubuntu 自动获取ip

    $sudo dhclient -r $sudo dhclient $sudo dhclient eth0