【HTML】iframe嵌套界面自适应,可高度自由收缩
最近在做网页时需要使iframe高度自适应,以提高用户体验,网上找了挺多都很复杂,最后找到了这个
HTML:
<div class="main_page">
<iframe scrolling="no" id="main" name="main" frameborder="0" src=""
style="min-height:600px;width:100%;height:100%;"></iframe>
</div>
JS:
<script>
// 计算页面的实际高度,iframe自适应会用到
function calcPageHeight(doc) {
var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)
var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)
var height = Math.max(cHeight, sHeight)
return height
}
//根据ID获取iframe对象
var ifr = document.getElementById('main')
ifr.onload = function() {
//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩
ifr.style.height='0px';
var iDoc = ifr.contentDocument || ifr.document
var height = calcPageHeight(iDoc)
if(height < 850){
height = 850;
}
ifr.style.height = height + 'px'
}
</script>
【HTML】iframe嵌套界面自适应,可高度自由收缩的更多相关文章
- iframe跨域自适应高度
思路: 现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A. 当用户打开浏览器访问mail.html的时候载入B,触发B的onload事件获取其自身高度,然后 ...
- easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法。$('#win').window()
easyui 中iframe嵌套页面,大弹窗自适应居中的解决方法.$('#win').window() 以下是左边栏和头部外层遮罩显示和隐藏方法 /*外层 遮罩显示*/ function wrapMa ...
- iframe 自适应内容高度
在使用iframe的时候,会出现iframe不能随着内容的高度自动改变的情况,下面就介绍一种可以自适应高度的办法.<br/> <pre> <iframe id=" ...
- jquery库实现iframe自适应内容高度和宽度
javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! <iframe src="index.php" id=&qu ...
- 设置iframe高度自适应屏幕高度
写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...
- js自适应屏幕高度
//自适应屏幕高度 $(window).resize(function() { hightChange(); }); function hightChange(){ ; $();// iframe i ...
- 弹出窗口内嵌iframe 框口自适应
说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...
- 移动端web页面列表类上拉加载,查看详情,iframe嵌套第三方页面遇到的问题以及解决办法
1.移动端上拉加载 网上有很多成熟的插件,比如iscroll.在这里介绍一下用jquery和js写的上拉加载方法.使用原生的去写上拉加载更多需要三个高度去做对比,以新闻类列表举例,首先需要整个dom的 ...
- css实现自适应屏幕高度;
css实现自适应屏幕高度: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
随机推荐
- C# WPF聊天界面(3/3)
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF聊天界面(3/3) 阅读导航 本文背景 代码实现 本文参考 1.本文背景 系列文章 ...
- Python3标准库:heapq堆排序算法
1. heapq堆排序算法 堆(heap)是一个树形数据结构,其中子节点与父节点有一种有序关系.二叉堆(binary heap)可以使用一个有组织的列表或数组表示,其中元素N的子元素位于2*N+1和2 ...
- Selenium实战(五)——HTML测试报告
一.概览下载与安装 HTMLTestRunner是unittest的一个扩展,可以生成易于使用的HTML测试报告.HTMLTestRunner是在BSD许可证下发布的. 下载地址:http://tun ...
- Balanced Lineup POJ - 3264
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...
- Verilog-同步FIFO
参考博客:https://blog.csdn.net/hengzo/article/details/49683707 1.基本框图 1)双端口RAM加两个读写指针 2)写数据.写使能.写满:读数据.读 ...
- ssh 或 putty 连接linux报错解决方法
由于当天多次输入错误密码,ssh和putty就连接不上了,纠结了很久解决问题 ssh连接提示错误:server unexpectedly closed network connection putty ...
- 安全 - CORS(脚本请求等)
功能概述 出于安全原因,浏览器限制从脚本内发起的跨域HTTP请求 或 拦截了跨域请求的结果. 例如,XMLHttpRequest和Fetch API遵循同源策略. 这意味着使用这些API的Web应用程 ...
- 全网VIP视频解析接口
全网VIP视频在线解析可以免费观看[腾讯vip视频.爱奇艺vip视频.优酷VIP视频.土豆VIP视频.乐视VIP视频.芒果VIP视频]等等...可以vip免费观看.去广告等等. https vip视频 ...
- python递归删除目录本身以及目录下文件
import os def local_rm(dirpath): if os.path.exists(dirpath): files = os.listdir(dirpath) for file in ...
- H5_0018:z-index失效的原因
在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效. 在CSS中,只能通过代码改变层级,这个属性就是z-index, 要让z-index起作用有个小小前提,就是元素的p ...