Wie fügt man nur einen bestimmten Bereich einer Website in einen Iframe ein?

Ich möchte nur einen kleinen Teil einer Website in einen Iframe einfügen. Wie würde ich das tun? Normalerweise, wenn ich einen Iframe für eine Website (sagen wir Yahoo) einrichte, wird die gesamte Website abgerufen … Sagen wir, ich wollte nur einen kleinen Teil der Website, wie würde ich das machen?

Ist es möglich, Ränder in einen Iframe einer Website einzufügen?

Ich möchte ein Iframe einer Website auf meiner Website platzieren. (wenn das Sinn macht)

Danke im Voraus

In den meisten Fällen ist die Referenz extern und Sie haben keine Kontrolle über die externe Seite. Sie müssen also den IFRAME-Inhalt an die gewünschte Position scrollen. Das ist natürlich unmöglich. Ja, es gibt einige JavaScript-Hacks, aber sie sind alle eine schlechte Lösung, da das Scrollen erst nach dem Laden der Seite erfolgt. Die Lösung

Sie können den IFRAME in ein div packen und den DIV-Inhalt scrollen, indem Sie absolute TOP- und LEFT-CSS-Eigenschaften verwenden.

Hier ist ein Beispiel:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Hier haben Sie ein DIV mit den Abmessungen 400x200px. Indem Sie nun den IFRAME darin verschieben, können Sie ihn an der richtigen Stelle positionieren.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>

Dies kann aufgrund von nicht zuverlässig durchgeführt werden gleiche Ursprungspolitik und damit verbundene Iframe-Einschränkungen.

.. die gleiche Ursprungsrichtlinie ist ein wichtiges Sicherheitskonzept für eine Reihe von browserseitigen Programmiersprachen, wie z. B. JavaScript. Die Richtlinie .. verhindert den Zugriff auf die meisten Methoden und Eigenschaften über Seiten auf verschiedenen Sites.

Wenn es Ihre Website in Ihrer Website war [or a proxy to the target site] dann könnte JavaScript im Elternteil das DOM oder CSS des eingebetteten Iframes wie gewünscht ändern.

Wenn die Zielwebsite bereit ist, Daten über andere Mittel (einschließlich XDR/XHR+KOR), dann könnten diese möglicherweise auch als Hack-a-Bouts verwendet werden. Für diese Aufgabe gibt es jedoch keine allgemeine Lösung.

Eben jQuery.load (das XHR verwendet) wird durch dieselbe Ursprungsrichtlinie eingeschränkt:

Aufgrund von Browser-Sicherheitseinschränkungen unterliegen die meisten “Ajax”-Anfragen dem gleiche Ursprungspolitik; Die Anforderung kann Daten von einer anderen Domäne, Unterdomäne oder einem anderen Protokoll nicht erfolgreich abrufen.

Ein <iframe> gibt Ihnen ein vollständiges Fenster, mit dem Sie arbeiten können. Der direkteste Weg, das zu tun, was Sie möchten, besteht darin, dass Ihr Server Ihnen eine vollständige Seite liefert, die nur das Fragment enthält, das Sie anzeigen möchten.

Alternativ können Sie auch einfach eine einfache verwenden <div> und benutze die jQuery load Funktion, um die ganze Seite zu laden und nur den gewünschten Abschnitt herauszupicken:

$('#target-div').load('http://www.yahoo.com');

Möglicherweise müssen Sie noch andere Dinge tun, und ein wesentlicher Unterschied besteht darin, dass der Inhalt Teil der Hauptseite wird, anstatt in einem separaten Fenster getrennt zu sein.

Sie können die URL nicht manipulieren, um nur einen Teil der Seite abzurufen. Was Sie also tun möchten, ist, den Seiteninhalt über die serverseitige Sprache Ihrer Wahl abzurufen und dann den HTML-Code zu analysieren. Von dort aus können Sie das spezifische DIV, nach dem Sie suchen, abrufen und es dann auf Ihrem Bildschirm ausdrucken. Sie können auch verwenden, um unerwünschte Inhalte zu entfernen.

Mit PHP könnten Sie verwenden file_get_contents() um die Datei zu lesen, die Sie analysieren und dann verwenden möchten DOMDocument um es zu analysieren und das gewünschte DIV zu greifen.

Hier ist die Grundidee. Dies ist ungetestet, sollte Sie aber in die richtige Richtung weisen:

$page = file_get_contents('http://touch.facebook.com');
$doc = new DOMDocument();
$doc->loadHTML($page);
$divs = $doc->getElementsByTagName('div');
foreach($divs as $div) {
    // Loop through the DIVs looking for one withan id of "content"
    // Then echo out its contents (pardon the pun)
    if ($div->getAttribute('id') === 'content') {
         echo $div->nodeValue;
    }
}