场景：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 - 3577 Fast Arrangement 线段树

    Fast Arrangement Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...

  2. HDU - 1754 A - I Hate It 线段树

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. 机器学习之路: python 决策树分类DecisionTreeClassifier 预测泰坦尼克号乘客是否幸存

    使用python3 学习了决策树分类器的api 涉及到 特征的提取,数据类型保留,分类类型抽取出来新的类型 需要网上下载数据集,我把他们下载到了本地, 可以到我的git下载代码和数据集: https: ...

  4. C# String.Format 格式化字符串 数字/时间

    首先献给只想知道结果的人 格式化 DateTime 对象 标准 数字 格式化 Int Decimal Float Double 关于这一块一直不是很清楚,MSDN 上也不够清晰. 就花了点时间敲了一下 ...

  5. 如何破解安卓App

    韩梦飞沙 yue31313 韩亚飞 han_meng_fei_sha  313134555@qq.com 如何破解安卓App

  6. 洛谷 P4884 多少个1？

    题面在这里 好久没做题了2333,竟然还一次A了,神奇 大概就是等比数列然后把分母乘过去,然后直接BSGS就行了,就是要写快速乘恩... #include<bits/stdc++.h> # ...

  7. 关于mysql_connect CLIENT_MULTI_RESULTS

    自己写了一个mysql存储过程,以为php有用于调用存储过程的内建函数,查了一下发现只能用mysql_query(call pro())这样的方式,我认为从本质上也就相当于在mysql命令行里执行语句 ...

  8. Java 接口与抽象类

    抽象类 <JAVA编程思想>一书中,将抽象类定义为"包含抽象方法的类".只要用abstract修饰的类就是抽象类,抽象类不一定包含抽象方法,但有抽象方法的类一定是抽象类 ...

  9. python开发_tkinter_获取单选菜单值

    在之前的blog中有提到python的tkinter中的菜单操作 python开发_tkinter_窗口控件_自己制作的Python IDEL_博主推荐 python开发_tkinter_窗口控件_自 ...

  10. nginx新建nginx_fzjh.conf文件，不使用默认配置文件

    worker_processes 4; events{ worker_connections 1024; } http{ server { listen 80; server_name myserve ...