2013-07-25 4 views
2

Я использовал iframe для доставки значка изображения для ссылок pdf на странице html. Я попытался использовать переполнение: скрытый, прокрутка: «нет» и т. Д. Для удаления полосы прокрутки из 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> 
+0

Пожалуйста, см. следующую ссылку http://stackoverflow.com/questions/15494568/ html-iframe-disable-scroll –

ответ

8

Вы можете установить атрибут scrolling= 'no' в вашем IFRAME.

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

Вот fiddle

UPDATE

Вот fiddle с действующей ссылки PDF. Это выглядит нормально на моем браузере (лл, хром)

+0

Спасибо. Я попробовал. Но он не работает на моей странице. Попробуйте указать ссылку iframe src на существующий файл pdf в вашей системе. Тогда вы все равно получите полосу прокрутки. – Vineetha

+0

строка src iframe не предназначена для отображения pdfs – MaVRoSCy

+0

Хорошо. Мое требование состояло в том, чтобы отобразить первую страницу документа PDF в качестве значка. Можете ли вы предложить мне возможный способ сделать это? – Vineetha

1

Пожалуйста, попробуйте этот код

<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

+0

Спасибо за ответ. Но полоса прокрутки все еще видна для меня. – Vineetha

+0

прошу пробовать код. – Kasma

+0

Да Я добавил полный код. Пожалуйста, проверьте. – Vineetha

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

Используйте выше, чтобы удалить скроллбары из фреймов на хроме

Смежные вопросы