博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iframe高度自适应的方法
阅读量:6973 次
发布时间:2019-06-27

本文共 642 字,大约阅读时间需要 2 分钟。

hot3.png

JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。

如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度,同样可以实现上面的需求。当内容是未知或者是变化的时候。这个时候又有几种情况了。

iframe内容未知,高度可预测

这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用javascript改变高度。常用的兼容代码有:

function setIframeHeight(iframe) {	if (iframe) {		var iframeWin = iframe.contentWindow				|| iframe.contentDocument.parentWindow;		if (iframeWin.document.body) {			iframe.height = iframeWin.document.documentElement.scrollHeight					|| iframeWin.document.body.scrollHeight;		}	}};window.onload = function() {	setIframeHeight(document.getElementById('iframe-frame'));};

转载于:https://my.oschina.net/yongqingfan/blog/734675

你可能感兴趣的文章
HDU2425:Hiking Trip(BFS+优先队列)
查看>>
[Oracle]ORA-01461: can bind a LONG value only for insert into a LONG column
查看>>
xcode6新建工程
查看>>
单向路由算法
查看>>
RabbitMQ系列教程之二:工作队列(Work Queues)
查看>>
scrapy入门教程
查看>>
Linux学习之CentOS(三十三)--DNS基础及域名系统架构
查看>>
leetcode349
查看>>
批处理-自动同步数据库
查看>>
git常用命令[持续更新]
查看>>
HTML标签 — dl,dt,dd
查看>>
python-----基础大杂烩
查看>>
多个Tomcat同时运行环境配置 - imsoft.cnblogs
查看>>
计算概论(A)/基础编程练习2(8题)/6:数组逆序重放
查看>>
客户文章:Windows Azure SendGrid入门
查看>>
bzoj千题计划196:bzoj4826: [Hnoi2017]影魔
查看>>
SpringMVC-RESTRUL___CRUD知识点总结
查看>>
jquery的each()详细介绍
查看>>
Tablespace for table '`pomelo`.`bag`' exists. Please DISCARD the tablespace before IMPORT.
查看>>
virt-manager install on CentOS7-mini
查看>>