HTML-Abschnitt von einer anderen Website einbetten?

Question

Gibt es eine Möglichkeit, nur einen Teil einer Website in eine andere HTML-Seite einzubetten?

Beispiel: Ich sehe eine Antwort, über die ich bloggen möchte, also greife ich den HTML-Inhalt und splat irgendwo hinein und zeige nur das, gestylt wie es auf stackoverflow ist. Grundsätzlich möchte ich den Abschnitt der Seite mit Original-Styling blockieren, wenn das sinnvoll ist. Ist das etwas, das die Seite selbst zu bieten hat, oder kann ich einen Iframe verwenden und sagen, dass er nur ein bestimmtes Element oder etwas Verrücktes zeigt? Offen für alle Optionen, aber ich möchte, dass es als HTML angezeigt wird, nicht als Bild (das ist wirklich ein letzter Ausweg).

Wenn das überhaupt möglich ist, gibt es Sicherheitsbedenken, die ich beachten muss?

Answer 1

Denken Sie nicht, dass Bild wirklich letzter Ausweg sein sollte. Sie haben keine Kontrolle über das HTML/CSS der Quellseite. Selbst wenn Sie eine Lösung erstellen (wahrscheinlich mithilfe von JavaScript, um das gewünschte Snippet zu analysieren), gibt es keine Garantie dafür, dass die Site sich morgen nicht dafür entscheidet, ihr Layout zu ändern.

Sogar Jeff, der die Kontrolle über das Layout von stackoverflow.com hat, bevorzugt immer noch screen-capture die Seite, anstatt den Inhalt live zu ziehen.

Jetzt, wenn Ihr Ziel war, den Inhalt automatisch aktualisieren zu lassen, wäre das eine andere Geschichte. Aber solange Sie nicht eine bestimmte Methode zum Teilen von Inhalten wie RSS verwenden, wäre Ihre Lösung sehr fragil.

Answer 2

Das klingt nach etwas, für das die Web Slices von IE8 perfekt wären. Es ist jedoch nur in IE8 verfügbar, und der Ursprungsort müsste implementieren, damit Sie ihn nutzen können.

Answer 3

Ich würde empfehlen, eine serverseitige Lösung mit Python zu verwenden; Verwenden Sie urllib2, um die Seite anzufordern, und verwenden Sie dann BeautifulSoup, um das benötigte Bit zu analysieren. BeautifulSoup hat eine sehr flexible Auswahl api, mit dem Sie Heuristik für den Bereich Handwerk können Sie interessiert sind

Zur Veranschaulichung:.

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

diese Weise, wenn der Webmaster das Markup auf der Seite später ändert, Ihre Schaben Skript sollte immer noch funktionieren.

Answer 4

Das Konzept, das Sie beschreiben, ist in etwa ein sogenanntes "Purple Include" oder "Transclusions". Es gibt eine Bibliothek dafür, aber es ist nicht gerade aktiv entwickelt. Hier ist ein paar ajaxianarticles drauf.

Answer 5

Auf Client-Seite ist die einzige praktische Option. Es ist möglich, es zu scrollen, aber es funktioniert möglicherweise nicht auf lange Sicht, weil es technisch dem Clickjacking-Angriff nahekommt.

Es gibt auch Cross-Site-XHR, aber erfordert Opt-in von Zielseite, und heute funktioniert nur in wenigen aktuellen Browsern.

Das Erhalten von HTML auf der Serverseite ist einfach (jedes vernünftige Webframework hat die Fähigkeit, Seite herunterzuladen und HTML zu analysieren und Sie können XPath/XSLT oder DOM verwenden, um das gewünschte Bit zu extrahieren).

Das Erzielen von Stilen wird jedoch schwierig - CSS-Regeln funktionieren möglicherweise nicht mit HTML-Fragment, das aus dem Kontext genommen wurde. Sie müssten CSS analysieren, Regeln extrahieren und transformieren oder den Browser verwenden und currentStyle von jedem Knoten lesen.

Offensichtlich müssen Sie HTML stark filtern, den Sie extrahieren, um XSS zu vermeiden. Es ist schwieriger als es scheint.

Wenn Sie dies nicht automatisieren müssen, kann ein guter HTML + CSS WYSIWYG-Editor Inhaltsfragmente mit Stilen extrahieren.