几行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会自动管理数据库连接, ...
随机推荐
- django中两张表有外键关系的相互查找方法，自定义json编码方法
两张通过外键联系的表,如何在一张表上根据另一张表上的属性查找满足条件的对象集? 平常查找表中数据的条件是python中已有的数据类型,通过名字可以直接查找.如果条件是表中外键列所对应表的某一列,该如何 ...
- OI回忆录（流水账）
今天是NOI2017疏散日,晚上回到家在电脑前写下这篇回忆录. 初中参加过几次普及组,拿过一等奖,自招进slyz. 高一参加过CTSC2016,狗牌滚粗qwq 高二参加过WC2017,CTSC2017 ...
- Codeforces Round #461 (Div. 2)
A - Cloning Toys /* 题目大意:给出两种机器,一种能将一种原件copy出额外一种原件和一个附件, 另一种可以把一种附件copy出额外两种附件,给你一个原件, 问能否恰好变出题目要求数 ...
- poj 3264 线段树
题目意思:给定Q(1<=Q<=200000)个数A1,A2,```,AQ, 多次求任一区间Ai-Aj中最大数和最小数的差 线段树太弱了,题目逼格一高连代码都读不懂,今天开始重刷线段树,每天 ...
- zookeeper【5】分布式锁
我们常说的锁是单进程多线程锁,在多线程并发编程中,用于线程之间的数据同步,保护共享资源的访问.而分布式锁,指在分布式环境下,保护跨进程.跨主机.跨网络的共享资源,实现互斥访问,保证一致性. 架构图: ...
- hdu 3879 方案选择
每日一水--- #include <cstdio> #include <cstring> #include <vector> #define oo 0x3f3f3f ...
- bzoj 3931 最短路+最大流
较水,但因为范围问题WA了两次.... /************************************************************** Problem: 3931 Us ...
- UC浏览器 垂直水平居中
今天使用下述方式定义水平垂直居中不起作用 #box{ position: fixed; left:; right:; top:; bottom:; margin: auto; } 然后改用: #box ...
- 文件上传demo
前端代码: <form action="upload.php" enctype="multipart/form-data" method="po ...
- SQL（insert、delete、update）执行成功，但是数据库表中无显示无记录
如题,程序中insert一条记录,调试过程中根据执行结果发现此条sql已经执行成功(影响行数为1且插入记录已生成自增主键正确值),但是查询数据库相应表时发现表中并无相应记录,通过直接在表中插入测试数据 ...