Вставить раздел HTML с другого сайта?

Question

Есть ли способ вставить только раздел сайта в другую HTML-страницу?

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

Если это вообще возможно, есть ли какие-либо проблемы безопасности, о которых мне нужно знать?

Answer 1

Не думайте, что изображение действительно должно быть последним средством. Вы не можете контролировать HTML / CSS исходной страницы, поэтому даже если вы создаете решение (возможно, с помощью JavaScript для анализа нужного фрагмента), нет гарантии, что завтра сайт не решит изменить свой макет.

Даже Джефф, который контролирует макет stackoverflow.com, по-прежнему предпочитает снимок экрана сайта, а не извлекать содержимое в реальном времени.

Теперь, если вашей целью было автоматическое обновление содержимого, это была бы другая история. Но все же, если вы не используете какой-то согласованный метод обмена контентом, такой как RSS, ваше решение будет очень хрупким.

Answer 2

Концепция, которую вы описываете, примерно такова, что называется «фиолетовым включением» или «включением». Для этого есть библиотека, но она не совсем активно развивается. Вот пара ajaxian статей на нем.

Answer 3

На стороне клиента <iframe> - единственный практический вариант. Его можно прокрутить, но в долгосрочной перспективе он может не сработать, поскольку он технически близок к атаке с помощью клик-джеккинга.

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

Получить HTML на стороне сервера легко (каждая приличная веб-платформа имеет возможность загружать страницы и анализировать HTML, и вы можете использовать XPath / XSLT или DOM для извлечения нужного вам бита).

Однако получить стили будет непросто - правила CSS могут не работать с фрагментом HTML, вырванным из контекста. Вам придется анализировать CSS, извлекать и преобразовывать правила или использовать браузер и читать currentStyle каждого узла.

Очевидно, что вы должны тщательно фильтровать HTML, который извлекаете, чтобы избежать XSS. Это сложнее, чем кажется.

Если вам не нужно автоматизировать это, хороший редактор HTML + CSS WYSIWYG мог бы извлечь фрагмент содержимого со стилями.

Answer 4

Я бы рекомендовал использовать решение на стороне сервера с Python; используя urllib2 для запроса страницы, затем используйте BeautifulSoup для анализа нужного вам бита. BeautifulSoup имеет очень гибкий API для выбора, с помощью которого вы можете создать эвристику для интересующего вас раздела.

Для иллюстрации:

soup = BeautifulSoup(html)
text = soup.find(text="Some text on the page that is unlikely to change")
print soup.parent.prettify()

Таким образом, если веб-мастер позже изменит разметку на странице, ваш скрипт очистки все равно должен работать.

Answer 5

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