Встраивание части веб-сайта
предположим, я хочу встроить последнюю комикс одной из моих любимых веб-комиксов в свой сайт в качестве своего рода продвижения для него. Веб-комикс имеет полоску внутри div с идентификатором, поэтому я решил, что могу просто вставить div на свой сайт, за исключением того, что я не мог найти примеров кода для того, как это сделать (все они показывают, как вставлять flash или весь сайт). Может кто-нибудь показать мне (или рассказать), как это делается?
PS Я бы предпочел не использовать серверные скрипты или внешние сервисы (что часто рекомендуется для внедрения RSS).
4 ответов
Update-кросс-доменный запрос с jQuery (на стороне клиента)
я просматривал блог Джеймс Padolsey, где он написал большую статью, о том, как сделать междоменный запрос С jQuery, также Крис Heilmann имеет хороший демо.принцип заключается в использовании YQL -> api yahoo для запросов веб-страниц, где вы получаете JSON со всеми html. Счастливый выскабливание:)
очистка удаленных данных с помощью php, загрузить с помощью jQuery
как насчет рассмотрения простой AJAX звонок, что бы перехватить комический элемент и обновить его содержимое вашей <div id="update-comic" />
в основном используется для этой цели?
также вы будете использовать простой php получить удаленную страницу, потому что вы не можете сделать AJAX-вызов на другой домен
Примечание: пользователь должен иметь JavaScript включен, также следующий код использует библиотеку jQuery
собираем все вместе!--9-->
-
на Вашей странице, где вы хотите отобразить удаленный комикс создать div только для этой цели, назовем это update-comic
<div id="update-comic">
<!-- here comes scraped content -->
</div>
-
записать php, назовем его comic-scrape.php
, это скачать html от удаленной страницы, вы должны рассмотреть кэширование ответ и обновление его на заданном интервале (например, 30min, 1hr, ваш звонок.. :))
производительность сервера не должна пострадать после простой реализации проверки кэша
<?php
$url = 'http://www.example.com/';
$response = file_get_contents($url);
echo $response;
-
сейчас идет jQuery magic, где вы делаете вызов ajax на своем PHP-скребке и берете только соответствующий элемент, который вас интересует. Поместите этот скрипт в свой посмотреть страницы (где у вас есть свой <div id="update-comic" />
<script type="text/javascript">
$(function () {
// set all your required variables
var
localUrl = '/comic-scrape.php',
elementId = '#remote-comic-id',
elementToUpdate = $('#update-comic');
// update the local elementToUpdate with elementId contents
// from your php in localUrl
elementToUpdate.load(localUrl + ' ' + elementId;
});
</script>
на Вашей странице, где вы хотите отобразить удаленный комикс создать div только для этой цели, назовем это update-comic
<div id="update-comic">
<!-- here comes scraped content -->
</div>
записать php, назовем его comic-scrape.php
, это скачать html от удаленной страницы, вы должны рассмотреть кэширование ответ и обновление его на заданном интервале (например, 30min, 1hr, ваш звонок.. :))
производительность сервера не должна пострадать после простой реализации проверки кэша
<?php
$url = 'http://www.example.com/';
$response = file_get_contents($url);
echo $response;
сейчас идет jQuery magic, где вы делаете вызов ajax на своем PHP-скребке и берете только соответствующий элемент, который вас интересует. Поместите этот скрипт в свой посмотреть страницы (где у вас есть свой <div id="update-comic" />
<script type="text/javascript">
$(function () {
// set all your required variables
var
localUrl = '/comic-scrape.php',
elementId = '#remote-comic-id',
elementToUpdate = $('#update-comic');
// update the local elementToUpdate with elementId contents
// from your php in localUrl
elementToUpdate.load(localUrl + ' ' + elementId;
});
</script>
надеюсь, я все предусмотрел.
использование simplexml и xpath
как предложил филфрео в комментарии, жизнеспособное решение также может содержать выбор необходимой серверной части id. Это очень легко с использованием PHP simplexml и немного xpath:
<?php
// set remote url and div id to be found
$elementId = 'remote-comic-id';
$url = 'http://www.example.com/';
// instantiate simple xml element and populate from $url
$xml = new SimpleXMLElement($url, null, true);
// find required div by id
$result = $xml->xpath("//div[id={$elementId}]");
// take first element from array, which is our desired div
$div = array_pop($result);
echo $div;
Это невозможно, потому что вы не можете манипулировать содержимым iframe/frame. Использование тега iframe просто изменит содержимое тега, но не src. Ни с AJAX, потому что вы должны быть в одном домене.
Так, например, вы можете использовать PHP с cURL или просто с fopen.
Вы можете просто использовать iframe
. Содержание не буквально на этой странице, но похоже.
вот пример:http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe
это выглядит так:
<iframe src ="http://www.example.com/index.html" width="100%" height="300"></iframe>