iframe自适应高度的方法
不带边框的iframe因为能和网页无缝的结合从而不刷新新页面的情况下实现更新页面部分的数据成为可能,可是iframe却不像层那样可以收缩自如,iframe高度需要动态的调整需要JS来配合使用,只能通过JS动态的来赋给他高度。
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>
或者:
<script language="javascript" type="text/javascript">
function dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}
else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +20;
pTar.width = pTar.contentDocument.body.scrollWidth+20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
<iframe
src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0"
frameborder="0" scrolling="auto" id="ifm" name="ifm"
onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>
iframe自适应高度的方法的更多相关文章
- Iframe 自适应高度的方法!
第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...
- iframe自适应高度解决方法 .
<div id="leftBar"> <iframe name="tag" src="_iframe.html" styl ...
- 让iframe自适应高度-真正解决
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
- iframe自适应高度的多种方法小结
转自:http://www.jb51.net/article/15780.htm 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小 ...
- iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的 不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 ifram ...
- iframe自适应高度的多种方法方法小结(转)
对于自适应高度的代码有很多,可效率什么的考虑进来好代码就不多见了,不过思路倒是差不多的不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的 ...
- 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 ...
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
随机推荐
- POJ2104:K-th Number——题解
http://poj.org/problem?id=2104 题目大意:求区间第k小. —————————————————————————— 主席树板子题. ……我看了半天现在还是一知半解的状态所以应 ...
- POJ3304:Segments——题解
http://poj.org/problem?id=3304 题目大意:给n条线段,求是否存在一条直线,将所有线段投影到上面,使得所有投影至少交于一点. ——————————————————————— ...
- BZOJ3140:[HNOI2013]消毒——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3140 https://www.luogu.org/problemnew/show/P3231 最近在 ...
- 欢迎大家收听喜马拉雅,我的主播频道http://m.ximalaya.com/weizhubo/44966139
关注光荣之路软件技术培训账号,即时收取测试开发技术的免费公开课信息,各大公司测试及开发招聘信息.最新的技术咨询.线下测试 喜马拉雅微电台,每天早晨光荣之路创始人吴老,都会跟大家一起分享测试行业心得体会 ...
- hdu6184 Counting Stars 【三元环计数】
题目链接 hdu6184 题解 题意是让我们找出所有的这样的图形: 我们只需要求出每条边分别在多少个三元环中,记为\(x\),再然后以该点为中心的图形数就是\({x \choose 2}\) 所以我们 ...
- HDU.1233 还是畅通工程(Prim)
HDU.1233 还是畅通工程(Prim) 题意分析 首先给出n,代表村庄的个数 然后出n*(n-1)/2个信息,每个信息包括村庄的起点,终点,距离, 要求求出最小生成树的权值之和. 注意村庄的编号从 ...
- React的getDefaultProps和getInitialState
getDefaultProps 不是获取默认props,而是设置默认props,主要用在ES5的React写法中getInitialState 不是获取默认State,而是设置初始的state,主要是 ...
- android源码了解dex加载流程
源码版本:4.4.4_r1 http://www.cnblogs.com/lanrenxinxin/p/4712224.html http://wangzhixian.org/Others/DexCl ...
- 【树形DP】【UVA10859】 Placing Lampposts
传送门 Description 给定一个\(n\)个点\(m\)条边的无向无环图,选择尽量少的节点,使得所有边都至少有一个顶点被选择.在这个基础上,要求有两个顶点被选择的边数尽可能大 Input 多组 ...
- Trades FZU - 2281 (大数+贪心)
This is a very easy problem. ACMeow loves GTX1920. Now he has m RMB, but no GTX1920s. In the next n ...