最简单的方法去掉iframe滚动条
该文也👧可以说是一个iframe自适应【zì shì yīng】大小的【dà xiǎo de】折中解决办法。iframe出现滚【chū xiàn gǔn】🐦动条的原因是【yuán yīn shì】😘,body里面的👴内容的🏫高度大于了iframe的高度【de gāo dù】,所以会【suǒ yǐ huì】出现滚【chū xiàn gǔn】🐦动条。
解决办法:
采用Jquery从iframe嵌套的🚏页面中🐠获取一个高度值【zhí】,在iframe的父窗口中的onload事件中【shì jiàn zhōng】🛠更新【gèng xīn】🎹iframe的高度【de gāo dù】。
具体实现代码:
父页面:
<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>
<body style="overflow:auto;">
<iframe id="myiframe" src="xx.html" onLoad="SetCwinHeight()"></iframe>
</body>
<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>
<body style="overflow:auto;"><iframe id="myiframe" src="xx.html" ></iframe></body></html>
子页面:
Html代码
<meta content="800px">
运行原【yùn háng yuán】理🥢: 父页面读取子页面中【yè miàn zhōng】meta的字段【de zì duàn】🛳值来设置iframe的高度🌚
额外说明:
当iframe 的【de】高度小于内容高度【róng gāo dù】时【shí】,如果父⛏窗口的【de】BODY 的【de】overflow:auto,则会出现🥂2个垂直【gè chuí zhí】滚动条【gǔn dòng tiáo】🥘,iframe的【de】垂直滚动条【gǔn dòng tiáo】🥘和父窗🎧口的【de】滚📙动条【dòng tiáo】🕟;
如果这时【shí】,BODY 的【de】⚫overflow:hidden,则只会【zé zhī huì】🌉出现iframe的【de】⚫垂直滚动条,但是【dàn shì】,iframe的【de】内容🧕显示不完🐹。
关键词:iframe
阅读本文后您有什么感想? 已有 人给出评价!
- 11
- 27
- 437
- 25
- 39
- 52