如何从 iframe 中删除滚动条？答案

【问题标题】：How to remove the scroll bar from iframe?如何从 iframe 中删除滚动条？
【发布时间】：2013-07-24 21:31:08
【问题描述】：

我使用 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>&nbsp;&nbsp;<i class=" icon-remove-sign" ></i>
    </div>

【问题讨论】：

请参考以下链接stackoverflow.com/questions/15494568/html-iframe-disable-scroll

标签： html image iframe

【解决方案1】：

您可以在 iframe 中设置属性 scrolling= 'no'。

<iframe src="..." style="overflow:hidden" scrolling="no" />

这是fiddle

更新

这是一个fiddle，带有一个有效的 pdf 链接。在我的浏览器上看起来不错（ff，chrome）

【讨论】：

谢谢。我尝试过这个。但它不适用于我的页面。请尝试将 iframe src 链接提供给系统中现有的 pdf 文件。然后你仍然会得到滚动条。
iframe的src行不用于显示pdf
好的。我的要求是将 pdf 文档的第一页显示为图标。你能建议我一个可行的方法吗？
我看过你之前的帖子。有关该问题的解决方案，请参阅该帖子

【解决方案2】：

请试试这个代码

<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>

添加演示link

【讨论】：

感谢您的回复。但滚动条对我来说仍然可见。
做 iframe 标签滚动="no"

【解决方案3】：

<style>
iframe::-webkit-scrollbar {
     display: none; 
}
</style>

使用上述方法从 chrome 上的 iframe 中删除滚动条

【讨论】：