如何從iframe中刪除滾動條？

我使用iframe爲html頁面中的pdf鏈接提供圖像圖標。我已經嘗試使用溢出：隱藏，滾動：「否」等從iframe中刪除滾動條。但他們中沒有一個人在鉻合金工作。在Firefox中嘗試時，滾動條被刪除，但圖像不可用。請幫助我。下面是完整的代碼：如何從iframe中刪除滾動條？

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

來源

2013-07-25 Vineetha

刪除I幀滾動條請請參考以下鏈接 http://stackoverflow.com/questions/15494568/ html-iframe-disable-scroll – 2014-02-26 04:58:35

您可以在您的iframe設置屬性scrolling= 'no'。

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

這裏是一個fiddle

UPDATE

這裏是一個fiddle一個有效的PDF鏈接。它看起來不錯我的瀏覽器（FF，鉻）

來源

2013-07-25 06:18:30 MaVRoSCy

謝謝。我嘗試過這個。但它不適合我的網頁。請嘗試將iframe src鏈接提供給系統中現有的pdf文件。那麼你仍然會得到滾動條。 – Vineetha

iframe的src行不用於顯示pdfs – MaVRoSCy

好的。我的要求是將PDF文檔的第一頁作爲圖標顯示。你能否建議我一個可能的方法來做到這一點？ – Vineetha

請試試這個代碼

<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

來源

2013-07-25 06:41:15 Kasma

感謝您的回覆。但滾動條對我來說仍然可見。 – Vineetha

可以請您抽取代碼.. – Kasma

是的，我已經添加了完整的代碼。請檢查。 – Vineetha

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

使用上述對鉻

來源

2015-08-25 13:33:48

如何從iframe中刪除滾動條？

回答

相關問題