iframe怎么不出现下方左右的滚动条?求大师指点,谢谢~~

iframe怎么不出现下方左右的滚动条?求大师指点,谢谢~~,第1张

检查CSS 属性

overflow : visible | auto | hidden | scroll

取值:

visible : 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto : 在必需时对象内容才会被裁切或显示滚动条

hidden : 不显示超过对象尺寸的内容

scroll : 总是显示滚动条

1、首先要将当前网页的浏览器滚动条隐藏掉:html{width:100%overflow:hidden}设置css即可。2、需要将iframe上面的scrolling属性的属性值设置为yes或者删除该属性这样引入的那个页面里面的滚动条就出来了,仅仅这样还是不行的,我们还要设置iframe的高度,以好完整的显示引入的那个页面,因为浏览器的大小不一或者说是频幕的大小不一,所以为了兼容所有显示屏iframe的高度就应该等于浏览器的高度。这样得到:var LouLanQiHeight = $(window).height()//得到浏览器的高度var LouLanQiWidth = $(window).width()//得到浏览器的宽度$('iframe').attr('height', LouLanQiHeight)//将iframe的高度设置为浏览器的高度3、前两步完成了,看上去貌似应经没问题了,但是当你把浏览器缩小了之后就有点问题了,滚动条被遮盖了一小部分。或者缩小之后你再刷新下页面在扩大,你会发现浏览器扩大了,但是那个引入的页面还是保持在浏览器缩小后的尺寸,这是因为在你没有缩小浏览器的时候iframe的高度就等于浏览器的高度了,当你缩小后,iframe的高度还是等于之前扩大后浏览器的高度,所以就把一部分遮盖了,然而当你在缩小后的浏览器刷新一下,js就重新得到了此时浏览器的高度然后再赋值给ifranme的高度,这个时候iframe的高度就等于缩小尺寸后浏览器的高度了。而此时将浏览器放大后,iframe的高度还是等于原来缩小尺寸浏览器的高度,所以就显示不全了。这个时候我们就要用到window对象下的onresize事件,改事件是在浏览器的尺寸发生变化的时候触发。我们将得到浏览器高度的代码放在这个事件里面就可以解决以上问题了。因为它当你每次改变浏览器的尺寸的时候他多会触发这个事件,从而执行里面的语句,因此iframe的高度也得到了更新。。。

一:去掉全部的滚动条

第一个方法: iframe 有一个scrolling属性,它有 auto , yes , no 这三个值。

scrolling : auto -----在需要的时候滚动条出现

scrolling : yes ------始终显示滚动条

scrolling : no -------始终隐藏滚动条

当设置 scrolling : no 时,全部的滚动条就没有了。

第二个方法:我发现除了 scrolling 可以去掉全部的滚动条外,还有另一个方法,在嵌入的页面里设置 body{overflow:hidden},这样也可以将滚动条去掉,而且这也是当我们只想去掉某一个滚动条所使用的属性。

二:去掉右边的滚动条且保留底下的滚动条

如果只想保留底下的滚动条,那么可以在嵌入的页面里设置 body{overflow-x:auto overflow-y:hidden;}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7267734.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存