场景：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. hdu 2275 Kiki & Little Kiki 1 水题

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2275 这个题比较简单,所以就没有测试样例提供给大家,基本把题目的样例过了就可以了 题目大意 给你一串操作, ...

  2. CentOS6启动流程（含详细流程图）

    参考:Linux启动流程和grub详解(作者:好笔记运维) 为什么把这位的参考放在前面,主要是这位大佬的流程图太详细了.虽说不一定要了解这么详细,但还是很佩服啊.不多说,上图(在新标签中打开图片) 下 ...

  3. 机器学习之路: python 线性回归LinearRegression, 随机参数回归SGDRegressor 预测波士顿房价

    python3学习使用api 线性回归,和 随机参数回归 git: https://github.com/linyi0604/MachineLearning from sklearn.datasets ...

  4. POJ 1469 COURSES 二分图最大匹配 二分图

    http://poj.org/problem?id=1469 这道题我绝壁写过但是以前没有mark过二分图最大匹配的代码mark一下. 匈牙利 O(mn) #include<cstdio> ...

  5. python 中__name__ = '__main__' 的作用，到底干嘛的？

    python 中__name__ = 'main' 的作用,到底干嘛的? 有句话经典的概括了这段代码的意义: "Make a script both importable and execu ...

  6. 解决同伴收获&解决同伴问题补分博客

    解决同伴问题 要求: 查看同组同学的课堂笔记,尝试解决同伴的问题,格式如下: 我的同组同学是XXXX学号XXXX同学 同组同学的问题是XXXX 我理解他的意思是XXXX 他的问题我有一个小建议是XXX ...

  7. PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程

    1.服务器会根据文件的后缀名去进行解析,如果是HTML文件则服务器不会进行语法解析,而是直接输出到浏览器. 2.如果一个页面中全部都是HTML代码而没有需要解析的PHP语法,则没有必要保存为PHP文件 ...

  8. UVALive 5058 Counting BST 数学

    B - Counting BST Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit S ...

  9. Linux性能监控分析命令（三）—iostat命令介绍

    性能监控分析的命令包括如下: 1.vmstat 2.sar 3.iostat 4.top 5.free 6.uptime 7.netstat 8.ps 9.strace 10.lsof 命令介绍: i ...

  10. perf 移植

    perf 移植 perf工具用于系统性能的调优,程序优化.源码在kenel/tools/perf目录. 我在imx6平台上进行移植.将自己的移植过程记录如下. 参考链接 http://blog.csd ...