wake-up-neo.net

Wie fügen Sie nur einen bestimmten Bereich einer Website in einen iframe ein?

Ich möchte nur einen kleinen Teil einer Website in einen Iframe setzen. Wie würde ich das machen? Normalerweise, wenn ich einen iframe für eine Website einrichte (sagen wir Yahoo), wird die gesamte Website abgerufen.

Ist es möglich, Margen auf einen iframe einer Website zu setzen?

Ich suche ein iframe einer Website auf meiner Website. (wenn das Sinn macht)

Danke im Voraus

9
Brian Smith

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 verschieben. 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 umschließen und den DIV-Inhalt mit absoluten TOP- und LEFT-CSS-Eigenschaften scrollen.

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. Durch Verschieben des IFRAME können Sie es jetzt an der richtigen Stelle positionieren.

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

Dies kann aufgrund der gleichen Origin-Richtlinie und der damit verbundenen Iframe-Einschränkungen nicht zuverlässig durchgeführt werden.

.. Die gleiche Origin-Richtlinie ist ein wichtiges Sicherheitskonzept für eine Reihe browserseitiger Programmiersprachen wie JavaScript. Die Richtlinie ... verhindert den Zugriff auf die meisten Methoden und Eigenschaften über verschiedene Seiten hinweg.

Wenn es sich um Ihre Website in Ihrer Website handelt [oder um einen Proxy für die Zielwebsite], kann JavaScript im übergeordneten Element das DOM oder CSS des eingebetteten iframe wie gewünscht ändern.

Wenn die Zielwebsite bereit ist, Daten auf andere Weise zu kommunizieren (einschließlich XDR/XHR + CORS ), könnten diese möglicherweise auch als Hack-a-Bouts verwendet werden. Es gibt jedoch keine generelle Lösung für diese Aufgabe.

Sogar jQuery.load (das XHR verwendet) ist durch dieselbe Origin-Richtlinie beschränkt: 

Aufgrund von Browser-Sicherheitsbeschränkungen unterliegen die meisten "Ajax" -Anforderungen der gleichen Origin-Richtlinie. Die Anforderung kann keine Daten erfolgreich von einer anderen Domäne, Subdomain oder einem anderen Protokoll abrufen.

1
user166390

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

Alternativ können Sie einfach einen einfachen <div> verwenden und die Funktion jQuery load verwenden, um die gesamte Seite zu laden und nur den gewünschten Abschnitt herauszupicken:

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

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


Sie können die URL nicht bearbeiten, um nur einen Teil der Seite zu erhalten. Sie möchten also den Inhalt der Seite über die serverseitige Sprache Ihrer Wahl abrufen und dann den HTML-Code analysieren. Von dort aus können Sie den gewünschten DIV auswählen und diesen dann auf Ihrem Bildschirm ausdrucken. Sie können auch unerwünschte Inhalte entfernen.

Mit PHP können Sie file_get_contents() verwenden, um die zu lesende Datei zu lesen, und dann DOMDocument, um sie zu parsen und die gewünschte DIV zu packen.

Hier ist die Grundidee. Dies ist nicht getestet, sollte 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;
    }
}
0
Azzy