как сделать предварительный просмотр веб-страницы приложения - PullRequest
Новая
       11

как сделать предварительный просмотр веб-страницы приложения

1 голос
/ 07 марта 2012

Я хочу сделать простое приложение, имеющее только одно текстовое поле и кнопку предварительного просмотра.

Должен отображаться предварительный просмотр страницы в div на той же странице. Пожалуйста, посмотрите код удара, чтобы получить точное представление. 

    <form method="POST" action="" id="preview-form" >
        <input type="text" id="urltopreview" name="urltopreview" />
        <input type="button" id="preview-button" value="Preview">
        <div id="preview"></div>
   </form>

Когда я вставляю URL и нажимаю кнопку «Просмотр», он должен загрузить предварительный просмотр этой страницы в div (имеющий id = «preview»), используя jquery & ajax.

Я пытался использовать функцию php file_get_contents () для генерации предварительного просмотра, но я получаю испорченные изображения.

Есть идеи?

1 Ответ

0 голосов
/ 07 марта 2012

Вы можете использовать скрытый Iframe и установить в качестве источника URL-адрес, введенный в текстовое поле. Затем получите содержимое iframe и добавьте его в предварительный просмотр div. 

function getContentFromIframe(iFrameName)
{

     var myIFrame = document.getElementById(iFrameName);
     var content = myIFrame.contentWindow.document.body.innerHTML;

     $("#preview").html(content);

}

OR

Чтобы загрузить внутреннюю страницу: Вы можете использовать метод Jquery load () 

 $("#preview").load($('#urltopreview').val());

Этот метод Jquery не будет работать для загрузки внешних страниц, поскольку вызовы ajax не могут извлечь внешние страницы по соображениям безопасности. Единственный способ получить внешние страницы на вашей странице - это использовать iframe или прокси на стороне сервера, который вы можете вызывать с помощью ajax.

...