JavaScript Iframe 自动适应
- - ITeye博客场景：Iframe嵌入flash,希望flash能随着页面的resize而resize. 首先导入JQuery框架，并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条. 然后添加window的resize事件. 这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果.
JavaScript Iframe 自动适应
标签：
javascript
iframe
适应
| 发表时间：2013-11-07 12:34 | 作者：
出处：http://www.iteye.com
场景：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);
}, 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(0,margin-top.length-2);
var actualHeight = document.body.offsetHeight - topNum;
$('#appFrame').css('height', actualHeight);
}
这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果。
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [javascript iframe 适应] 推荐：
三谈Iframe自适应高度
- xiao - Koubei UED Team一是因为这真的是一个被说烂的话题，二是因为太师傅在n年前就写过这篇再谈iframe自适应高度. 之所以再提该问题，是因为之前项目中确实遇到了这个问题的方方面面，有必要总结一下. 希望对各位有帮助，有错误请指正. 同域、子页面高度不会动态增加. 这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可.
jq 解决iframe高度自适应。
- - Web前端 - ITeye博客已有 0 人发表留言，猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.
jquery 实现iframe 自适应高度
- - Web前端 - ITeye博客引用：http://www.cnblogs.com/luluping/archive/2009/04/17/1437843.html. 超级简单的方法，也不用写什么判断浏览器高度、宽度啥的. 一个是放在和iframe同页面的，一个是放在test.html页面的. iframe代码，注意要写ID. jquery代码１：.
DIV嵌套同域iframe的高度自适应
- - 编程语言 - ITeye博客我们先看一个示例，有两个页面，1.html通过iframe嵌入2.html，两个页面都是同域的. 2.html，很多P元素将高度撑高一些.
这是一个ifrmae，嵌入在http:. //snandy.github.io/lib/iframe/1.html里
.根据自身内容调整高度
.iframe子父页面调用
- - CSDN博客Web前端推荐文章1、iframe子页面调用 父页面js函数. 子页面调用父页面函数只需要写上window.praent就可以了. 子页面取父页面中的标签中的值，比如该标签的id为“test”,则：. 但是我在chrome浏览器下却发现此方法无效了. 查了半天才了解，在chrome 5+中，window.parent无法在file://协议中运行，但是发布了之后http://协议下是可以运行的.
iframe post提交数据
- - Web前端 - ITeye博客对于iframe默认get提交 需要进行post数据的大量提交，给找到外国网站的简单例子如：
js打印iframe里面的内容
- - JavaScript - Web前端 - ITeye博客有时候系统中会有这样的需求，打印某些页面里的某部分内容，采用iframe的contentWindow.print()方法可以实现. . 当点击按钮时可以实现打印功能. 这样能实现打印功能，但是存在一个问题，就是如果这个iframe所在的这个页面还有其他的内容，而我们只需打印iframe里的内容，我试过了，如果用google那么他可以正常打印，但是IE,360却会打印这个页面的所有内容，这是因为当前也页面的焦点是在整个文档的，所以我们只需要将焦点设为iframe的window对象就可以了.
【转载】HTML5有效提升iFrame安全性 新增Sandbox属性
- - HTML5研究小组HTML 5将针对iframe元素增加sandbox属性，可以防止不信任的Web页面执行某些操作. HTML 5规范的编辑Ian Hickson谈到了sandbox的好处，它可以防止如下操作：. 访问父页面的DOM（从技术角度来说，这是因为相对于父页面iframe已经成为不同的源了）. 通过脚本嵌入自己的表单或是操纵表单.
动态创建iframe在IE下的两个问题
- - IT技术博客大学习标签： iframe. 表单提交到动态创建的iframe. 以下代码，一般用于在当前页 无刷新提交表单，其原理是把表单的target设为页面上某个iframe的id，使该iframe成为提交的目标，避免新开窗口或跳转. 但这段代码在 IE 6、7下无效. 以 innerHTML方式插入iframe，例如：.