jQuery, ajax, отображать страницу внутри другой страницы (например, iframe)

Question

Мне нужно отобразить страницу внутри страницы, как iframe, но с использованием jquery. Страницы не на одном сервере.

Главная страница - это html-страница внутри cms, а страница, которая должна быть вложена, - это медиа-страница со списками изображений или аудиофайлов, расположенная на другом сервере. Высота будет варьироваться на страницах мультимедиа, поэтому я как бы хотел держаться подальше от iframes ... есть ли простой вызов в jquery, который захватит страницу как iframe ... или тот, который ухудшается до iframe, если js повернут на уровне браузера?

Спасибо.

Answer 1

Mozilla добавила кросс-сайт-запросы.Это новый стандарт HTML5.Но общие не допускают кросс-сайт-запросов.Таким образом, вы должны сделать что-то вроде упомянутого ранее.Если вы будете использовать PHP-решение, используйте это:

<?php
    $external = file_get_contents($_POST['external']);
    echo $external;
?>

$().post("ajax.php", {external: "http://www.example.com/"}, function(data) {
    html = $("div#extract", data).html();
    $("div#insert").html(html);
}, "html");

Answer 2

Если ваш внешний контент не подается из того же домена, что и ваш основной веб-сайт, использовать AJAX для чего-то подобного не так просто, потому что вы столкнетесь с такой же политикой происхождения .

Одним из решений, позволяющих обойти ту же политику происхождения, было бы установить на сервере простой обратный прокси , который позволит браузеру использовать относительные пути для запросов AJAX, тогда как сервер будет действуя в качестве прокси для любого удаленного местоположения.

При использовании mod_proxy в Apache основной директивой конфигурации для настройки обратного прокси-сервера является ProxyPass. Обычно используется следующим образом:

ProxyPass     /external/     http://other-domain.com/

В этом случае браузер сможет запросить /external/index.html как относительный URL, но сервер будет обслуживать это, выступая в качестве прокси для http://other-domain.com/index.html.

Тогда в вашем JavaScript вы сможете использовать метод jQuery load() следующим образом:

$('#your_div').load('external/index.html');

Другой вариант - использовать iframe и динамически регулировать его высоту с помощью JavaScript. Вы можете проверить следующие сообщения переполнения стека для дальнейшего чтения по этой теме:

• Изменить размер iframe в соответствии с высотой содержимого в нем
• Динамическое изменение размера фрейма

Вы также можете рассмотреть полное решение на стороне сервера, как @ Yi Jiang , предложенное в комментарии выше. Вы можете вставить HTML-код с внешнего сайта на свой основной сайт, прежде чем отправлять его в браузер клиента.

Answer 3

Ajax по определению работает только на одном сервере, из-за одной и той же политики происхождения.Что вам нужно сделать, это загрузить страницу с другого сервера в файл PHP (назовем это xxx.php).Затем вы можете загрузить xxx.php в div yyy со следующим кодом:

$("#yyy").load("xxx.php");

Answer 4

Вам будет сложно получить контент Ajax из другого домена.Браузеры не позволят предотвратить использование межсайтовых скриптов (XSS).Вы можете использовать прокси на основе php, cURL или google Ajax API.

Другая альтернатива - просто использовать iframe, чтобы JavaScript получал высоты содержимого и устанавливал одинаковую высоту iframe (плюс отступы, чтобы браузеры не отображали полосы прокрутки).