场景：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. 深度学习基础系列（七）| Batch Normalization

    Batch Normalization(批量标准化,简称BN)是近些年来深度学习优化中一个重要的手段.BN能带来如下优点: 加速训练过程: 可以使用较大的学习率: 允许在深层网络中使用sigmoid这 ...

  2. Keystone几种token生成的方式分析

    从Keystone的配置文件中,我们可见,Token的提供者目前支持四种. Token Provider:UUID, PKI, PKIZ, or Fernet 结合源码及官方文档,我们用一个表格来阐述 ...

  3. Web2.0应用程序的7条原则

    个人看好Web的发展潜力,本文字摘自<Collective Intelligence 实战> 网络是平台 使用传统许可模式软件的公司或用户必须运行软件.定期更新至最新版本,以及扩展它来满足 ...

  4. ksyun主机挂载ksyun硬盘

    1.查看虚拟磁盘的设备号是 /dev/vdc ls /dev/vd*2.格式化块设备,强烈推荐ext4文件系统: mkfs.ext4 /dev/vdc 3.准备挂载点,建立挂载目录.例: mkdir ...

  5. vijos p1883

    题意: 有些东西就如同月光的魔法一般. Luke是爱着vijos的.他想为自己心爱的东西画些什么. 就画N个圆吧.把它们的圆心都固定在x轴上. 圆与圆.为了爱,两两不能相交.为了爱,它们可以互相贴在一 ...

  6. lua协程----ngx-lua线程学习笔记

    --[[ - @desc lua数据输出 - @param string 字符串 - return string --]] function dump(v) if not __dump then fu ...

  7. pygame系列_箭刺Elephant游戏_源码下载

    这个游戏原名为:Chimp,我们可以到: http://www.pygame.org/docs/tut/chimp/ChimpLineByLine.html 获取到源码和详细的源码讲解 下面是我对游戏 ...

  8. elasticsearch ik中文分词器安装

    特殊说明:灰色文字用来辅助理解的. 安装IK中文分词器 我在百度上搜索了下,大多介绍的都是用maven打包下载下来的源码,这种方法也行,但是不够方便,为什么这么说? 首先需要安装maven吧?其次需要 ...

  9. Date与String间的转换

    一.Date-->String :格式化过程 1. DateFormat :String format(Date d) 2.SimpleDateFormat是继承DateFormat(抽象类)的 ...

  10. Android证书有效性验证方案

    1.前言: 1.1.SSL劫持攻击:          目前虽然很多Android APP使用了https通信方式,但是只是简单的调用而已,并未对SSL证书有效性做验证.在攻击者看来,这种漏洞让htt ...