最简单的方法去掉iframe滚动条

三好青年人

三好青年人

2016-02-19 16:45

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享最简单的方法去掉iframe滚动条的教程,热爱PS的朋友们快点看过来吧!

  该文也可以说是一个iframe自适应大小的折中解决办法。iframe出现滚动条的原因是,body里面的内容的高度大于了iframe的高度,所以会出现滚动条。

  解决办法:

  采用Jquery从iframe嵌套的页面中获取一个高度值,在iframe的父窗口中的onload事件中更新iframe的高度。

  具体实现代码:

  父页面:

script type="text/javascript"function SetCwinHeight(){    var H=$("#myiframe").contents().find("meta").attr("content");    alert(H);    $("#myiframe2").height(H); } /scriptbody style="overflow:auto;"iframe id="myiframe" src="xx.html" onLoad="SetCwinHeight()"/iframe/bodyscript type="text/javascript"function SetCwinHeight(){      var H=$("#myiframe").contents().find("meta").attr("content");    alert(H);    $("#myiframe2").height(H);     }/scriptbody style="overflow:auto;"iframe id="myiframe" src="xx.html" /iframe/body/html

  子页面:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  Html代码

meta content="800px"

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  运行原理: 父页面读取子页面中meta的字段值来设置iframe的高度

  额外说明:

  当iframe 的高度小于内容高度时,如果父窗口的BODY 的overflow:auto,则会出现2个垂直滚动条,iframe的垂直滚动条和父窗口的滚动条;

  如果这时,BODY 的overflow:hidden,则只会出现iframe的垂直滚动条,但是,iframe的内容显示不完。

展开更多 50%)
分享

猜你喜欢

最简单的方法去掉iframe滚动条

Web开发
最简单的方法去掉iframe滚动条

Jquery iframe内部出滚动条

Web开发
Jquery iframe内部出滚动条

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

隐藏滚动条

Web开发
隐藏滚动条

层滚动条

Web开发
层滚动条

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ScrollView滚动条颜色的设置方法

编程语言 网络编程
ScrollView滚动条颜色的设置方法

用css美化滚动条

Html CSS布局 Div+CSS XHTML
用css美化滚动条

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

难道这就是结局 - QQ伤感分组

难道这就是结局 - QQ伤感分组

木有安全感的小女人 - QQ伤感分组

木有安全感的小女人 - QQ伤感分组
下拉加载更多内容 ↓