几行JavaScript代码搞定Iframe 自动适应
场景：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事件
代码
- $(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);
- }
$(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代码
- 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();
- });
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 自动适应的更多相关文章
- 5行js代码搞定导航吸顶效果
一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...
- 180行ruby代码搞定游戏2048
最今在玩2048这款小游戏,游戏逻辑简单,很适合我这样的对于游戏新入行的人来实现逻辑.于是选择了最拿手的ruby语言来实现这款小游戏的主要逻辑.还是挺简单的,加起来4小时左右搞定. 上代码: requ ...
- 200行Java代码搞定计算器程序
发现了大学时候写的计算器小程序,还有个图形界面,能够图形化展示表达式语法树,哈哈;) 只有200行Java代码,不但能够计算加减乘除,还能够匹配小括号~ 代码点评: 从朴素的界面配色到简单易懂错误提示 ...
- 【备忘】windows环境下20行php代码搞定音频裁剪
先上图,由于最近的需求需要对语音文件进行处理,所以抽空研究了下php处理音/视频文件的处理,简单的demo处理,截取一个音频文件的前20秒,并保存新的媒体文件. 操作步骤: ①在此站点下载所需的辅助程 ...
- 80行Python代码搞定全国区划代码
微信搜索:码农StayUp 主页地址:https://gozhuyinglong.github.io 源码分享:https://github.com/gozhuyinglong/blog-demos ...
- 3kb jQuery代码搞定各种树形选择。
自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * ...
- 10行代码搞定移动web端自定义tap事件
发发牢骚 移动web端里摸爬滚打这么久踩了不少坑,有一定移动web端经验的同学一定被click困扰过.我也不列外.一路走来被虐的不行,fastclick.touchend.iscroll什么的都用过, ...
- 30行代码搞定WCF并发性能测试
[以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main() { List< ...
- 开源作品ThinkJDBC—一行代码搞定数据库操作
1 简介 ThinkJD,又名ThinkJDBC,一个简洁而强大的开源JDBC操作库.你可以使用Java像ThinkPHP框架的M方法一样,一行代码搞定数据库操作.ThinkJD会自动管理数据库连接, ...
随机推荐
- Music in Car CF 746F
题目:http://codeforces.com/problemset/problem/746/F 先感叹一下题目之长! 一些测试样例在后面给出. 题目大意: Sasha 去工作的路上喜欢听歌,途中经 ...
- WinForm 使用 NPOI 2.2.1从datatable导出Excel
最新的NOPI应该是2.3了,但在官网上还是2.2.1. 也是第一次使用NPOI来导出Excel文件. 在写的时候搜不到2.2.1的教程,搜了一个2.2.0的教程. 不过也没什么问题,NPOI是真的方 ...
- 线性表之顺序表C++实现
线性表之顺序表 一.头文件:SeqList.h //顺序线性表的头文件 #include<iostream> ; //定义顺序表SeqList的模板类 template<class ...
- 【取对数】【哈希】Petrozavodsk Winter Training Camp 2018 Day 1: Jagiellonian U Contest, Tuesday, January 30, 2018 Problem J. Bobby Tables
题意:给你一个大整数X的素因子分解形式,每个因子不超过m.问你能否找到两个数n,k,k<=n<=m,使得C(n,k)=X. 不妨取对数,把乘法转换成加法.枚举n,然后去找最大的k(< ...
- [CodeChef-QUERY]Observing the Tree
题目大意: 给你一棵树,一开始每个点的权值都是0,要求支持一下三种操作: 1.路径加等差数列. 2.路径求和. 3.回到以前的某次操作. 强制在线. 思路: 树链剖分+主席树. 最坏情况下,n个点的树 ...
- bzoj 1176: [Balkan2007]Mokia&&2683: 简单题 -- cdq分治
2683: 简单题 Time Limit: 50 Sec Memory Limit: 128 MB Description 你有一个N*N的棋盘,每个格子内有一个整数,初始时的时候全部为0,现在需要 ...
- 【scrapy】使用方法概要（三）(转)
请初学者作为参考,不建议高手看这个浪费时间] 前两篇大概讲述了scrapy的安装及工作流程.这篇文章主要以一个实例来介绍scrapy的开发流程,本想以教程自带的dirbot作为例子,但感觉大家应该最先 ...
- HDU 4708 Rotation Lock Puzzle （简单题）
Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- Android 手机 无线 ADB
要用网络调试Android需要设备已经获取root权限 如果手机没有命令行工具,请先在手机端安装终端模拟器,然后在终端输入: $su #stop adbd #setprop service.adb.t ...
- DISQLite3 - A self-contained, embeddable, zero-configuration SQL database engine for Delphi
DISQLite3 implements a self-contained, embeddable, zero-configuration SQL database engine for Delphi ...