Html 如何从 iframe 中删除滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17850404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove the scroll bar from iframe?
提问by Vineetha
I used iframe for delivering an image icon for the pdf links in an html page. I have tried using overflow:hidden, scrolling: "no" etc for removing the scroll bar from iframe. But none of them is working in chrome. When tried in firefox,the scroll bar is removed,but image is not available. Please help me on this. Here is the complete code:
我使用 iframe 为 html 页面中的 pdf 链接提供图像图标。我曾尝试使用溢出：隐藏，滚动：“否”等从 iframe 中删除滚动条。但是他们都没有在 chrome 中工作。在firefox中尝试时，滚动条被删除，但图像不可用。请帮我解决这个问题。这是完整的代码：
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" href="cssjquery/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
<title>Unit 3, ADS</title>
<style type="text/css">
/* one */
.imagewrap {
display: inline-block;
position: relative;
}
.icon-remove-sign {
position: absolute;
top: 0;
right: 0;
}
iframe{
overflow:hidden;
}
</style>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jsjquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jsjquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('i.icon-remove-sign').on('click',function(e){
e.preventDefault();
pdfID = $(this).closest('.imagewrap')[0].id;
$('#dialog').dialog('open');
alert('Deleting '+pdfID+'');
$(this).closest('.imagewrap')
.fadeTo(300,0,function(){
$(this)
.animate({width:0},200,function(){
$(this)
.remove();
});
});
});
});
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<h1>PDF Files</h1>
<br><br>
<div class="imagewrap" id="pdf1">
<a href="something.pdf">
<img width="100" height="100" border="0">
<iframe src="something.pdf" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe></img>
</a> <i class=" icon-remove-sign" ></i>
</div>
回答by MaVRoSCy
回答by Kasma
Please try this code
请试试这个代码
<iframe src="your site url" width="100%" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);'></iframe>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Add demo link
添加演示链接
回答by Ian Everall
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Use the above to remove scrollbars from iframes on chrome
使用上述方法从 chrome 上的 iframe 中删除滚动条
