2015-02-19 1 views
0

Я работаю над предварительным просмотром определенного веб-сайта, над которым я работаю в бэкэнд.Загрузите веб-сайт в iframe на рабочий стол

<div class="tab-pane" id="preview_site"> 
        <iframe id="site_previewer" src="path/to/website" style="width:100%;height:600px;"></iframe> 
       </div> 

Это iframe. Проблема связана с загрузкой веб-страниц в виде вкладок, а не в виде рабочего стола. Используя текущую ширину, я хочу загрузить веб-сайт в виде рабочего стола. Манипулирование по ширине делает задание, но и iframe выходит из окна браузера. Как я могу это сделать?

+0

Если вы загружаете содержимое кадра из того же домена, в котором вы собираетесь отобразить IFRAME, посмотрите на это. Я использую его, и он работает очень хорошо ... https: //github.com/davidjbradshaw/iframe-resizer – Nick

+0

Вы можете взглянуть на это: http://stackoverflow.com/questions/166160/how -can-i-scale-the-content-of-an-iframe – Babak

+0

@BabakT: Проблема заключается в том, что я меняю ширину на 1280 пикселей. Рамка выходит из указанного контейнера. Ширина контейнера составляет 960 пикселей. – nirvair

ответ

0

Это, как я получил решение

<div class="tab-pane" id="preview_site"> 
        <div class="preview_wrap"> 
         <iframe id="site_previewer" class="frame_wrap" src="path/to/website/" ></iframe> 
        </div> 
       </div> 
<style type="text/css"> 
    .preview_wrap { 
    width: 100%; 
    height: 800px; 
    padding: 0; 
    overflow: hidden; 
} 
.frame_wrap { 
    width: 1280px; 
    height: 786px; 
    border: 0; 
    -ms-transform: scale(0.75); 
    -moz-transform: scale(0.75); 
    -o-transform: scale(0.75); 
    -webkit-transform: scale(0.75); 
    transform: scale(0.75); 

    -ms-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 
} 
</style>