iframe禁用滚动条后根据内容动态设置宽高
iframe作为嵌入内容,如果显示滚动条,有时候可能会出现外部有滚动条,iframe内部也有滚动条,影响美观,体验性也不好。如果禁用滚动条,有可能会出现iframe中的内容显示的情况。因此,如果禁用滚动条,需要根据iframe的内容动态设置iframe的宽度和高度。
如下所示,home.html作为嵌入页面,iframe所在的页面为主页面
<iframe id="mainIframe" name="mainIframe" src="html/home.html" height="100%" width="100%" scrolling="no">
</iframe>
在主页面中添加如下js代码
//动态设置iframe的高度和宽度var timeout;window.onload = function (){timeout= setTimeout(resizeIframe, 10);}function resizeIframe(){var iframe = document.getElementById("mainIframe");var iframeWindow = iframe.contentWindow;//内容是否加载完if (iframeWindow.document.readyState == "complete"){var iframeWidth, iframeHeight;//获取Iframe的内容实际宽度iframeWidth = iframeWindow.document.documentElement.scrollWidth;//获取Iframe的内容实际高度iframeHeight = iframeWindow.document.documentElement.scrollHeight;//设置Iframe的宽度,注意不能用iframe.style.widthiframe.width = iframeWidth;//设置Iframe的高度,注意不能用iframe.style.heightiframe.height = iframeHeight;} else{//重新调用timeout= setTimeout(resizeIframe, 10);}}
注意:iframe的初始width和height不要在style里面设置,否则后面的代码将不起作用。动态设置iframe的宽度和高度用iframe.width和iframe.height而不是用iframe.style.width和iframe.style.height。
iframe禁用滚动条后根据内容动态设置宽高相关推荐
- Android 动态设置宽高
Android 动态设置宽高 val params: FrameLayout.LayoutParams = view?.layoutParams as FrameLayout.LayoutParams ...
- android动态设置imageview大小,ImageView动态设置宽高
要求宽高比:宽高640240px android:layout_width="match_parent" android:layout_height="wrap_cont ...
- 为什么有些内联(行内)元素可以设置宽高?
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
- [css] img标签是行内元素,为什么却能设置宽高
[css] img标签是行内元素,为什么却能设置宽高 原来CSS中还有一个概念:可替换元素MDN上是这么解释的:在 CSS 中,可替换元素(replaced element)的展现效果不是由 CSS ...
- 行内元素和块级元素的区别,为何img、input等行内元素可以设置宽高??(夯实基础)
我们习惯将html中元素分类为行内元素和块级元素,如下: ·常见块级元素有:html.body.div.header.footer.nav.section.aside.article.p.hr.h1~ ...
- gridcontrol值为0时设置为空_CSS设置宽高的小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
- 行内和块级元素区别?如何让行内元素设置宽高?
行内和块级元素区别: 1.行内元素与块级函数可以相互转换,通过修改display属性值来切换块级元素和行内元素,行内元素display:inline,块级元素display:block. 2.行内元素 ...
- 关于span设置宽高
首先区别内联元素和块元素 内联元素不会独自占据一行,其他的内联元素也可以在同一行:块元素独自占据一行. 块级元素可设置宽高,内联元素设置无效. 块级元素的 width 默认为 100%,而内联元素则是 ...
- 如何给行内元素设置宽高
我们都知道行内元素直接设置宽高是无效的.当我们在面试中遇到这个问题的时候,很容易想到给它设置 display:block或者display:inline-block就可以了,但是面试官来了句" ...
最新文章
- MySQL中的索引(主键索引)
- String StringBuilder StringBuffer 对比 总结得非常好
- jdk1.8之HashMap
- 数据库查询前十条数据_西门子PLC1200组态王-Access数据库-⑨数据库查询
- 不恢复余数除法原理_青岛版二年级下册数学寒假预习:有余数的除法自主练习答案及讲解...
- 物理实验模拟软件_网络系统实验平台:发展现状及展望
- python中列表操作
- Hadoop安装教程(单机/伪分布式配置)
- WEB前端开发快速入门教程
- [初级-详细]新大陆NewLand云平台Android离线程序开发(离线导入Moudle)
- android 图片闪光动画_Android使用LinearGradient实现两道闪光效果
- Python翻译库 pygtrans 谷歌翻译
- 计算机考试科目一模拟试题,学车科目一模拟考试,最全答题知识点,送给准备考驾照的你...
- 混频器/变频器的原理及分类
- 同步升压与非同步升压区别
- 20154322杨钦涵 Exp6 信息搜集与漏洞扫描
- 计算机考研复试C语言常见面试题
- python re库 详解(正则表达式)
- VB.NET的form窗体操作
- 数据结构(七)二叉搜索树