Kann ein Iframe nur einen bestimmten Teil der Seite anzeigen?

Lesezeit: 5 Minuten

Benutzeravatar von MANnDAaR
MANnDAaR

Ich arbeite an Iframes und muss einen bestimmten Teil der Seite anzeigen [say, the top right ] in einem Iframe mit etwa 300px Breite und 150px Höhe.

Beispiel:

Angenommen, ich wollte ein setzen iframe von www.example.com/portfolio.php auf einer Seite, aber haben Sie den Iframe so bemessen, dass nur die “Portfolio-Sport“Abschnitt bei der oben rechts.

Wie kann ich das erreichen?

DEMO

[Thanks to Pointy]

  • Befindet sich der Iframe in derselben Domäne wie die übergeordnete Seite?

    – Nick Craver

    17. Juli 2010 um 15:27 Uhr

  • Ich glaube nicht, dass mit einem <iframe> ist wirklich der richtige Weg, dies zu tun.

    – Spitze

    17. Juli 2010 um 15:36 Uhr

Benutzeravatar von Pointy
Spitz

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 verwenden Sie die jQuery-Funktion “load”, um die gesamte Seite zu laden und nur den gewünschten Abschnitt herauszupicken:

$('#target-div').load('http://www.example.com/portfolio.php #portfolio-sports');

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.

  • Danke Spitze. Es ist genau das, was ich mir angesehen habe – “Skipped iframe”.

    – MANnDAaR

    17. Juli 2010 um 16:02 Uhr

  • Ich bin mir nicht sicher, aber wenn das geladene HTML ein POST-Formular enthält, bin ich mir nicht sicher, ob die Übermittlung an den Server aufgrund von Sicherheitseinschränkungen (Richtlinie zum gleichen Ursprung) funktioniert.

    – Paulo

    11. November 2014 um 23:38 Uhr

  • @Paolo gut, wenn es sich um Inhalte aus einer anderen Domäne als der handelt .load() funktioniert nicht, es sei denn, die Quellsite legt entsprechende CORS-Header fest. Wenn es geladen wird, sollte ein POST problemlos funktionieren.

    – Spitze

    11. November 2014 um 23:50 Uhr

  • Beachten Sie, dass dadurch keine Skripte/Stile ausgeführt werden, die von einer Seite über jQuery geladen werden load(). Damit musst du umgehen $.getScript unter anderem.

    – Adamj

    15. Januar 2016 um 5:01 Uhr

  • mehr Chancen auf Cors-Probleme

    – Kurcula

    6. September 2017 um 20:19 Uhr

Benutzeravatar von Shiku gfa
Shiku gfa

Ich habe diese Arbeit gut für mich.

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>

Funktioniert dies für Sie oder nicht, lassen Sie es uns wissen.

Quelle: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

  • Ich denke, dies ist die richtige Lösung, die akzeptierte Antwort erfüllt die Anforderung mit iframe nicht.

    – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

    6. Januar 2017 um 8:10 Uhr

  • Perfekte Lösung. Danke vielmals.

    – Vivek Sancheti

    7. Februar 2017 um 7:22 Uhr

  • Das Scrollen von Nein funktioniert bei mir in der React-JS-Anwendung nicht

    – yaswantkoneri

    21. November 2019 um 6:46 Uhr

  • die beste Antwort und Lösung

    – h1h2

    21. Oktober 2020 um 13:34 Uhr

Benutzeravatar von dmatamales
dmamales

Ich brauchte einen Iframe, der einen Teil einer externen Seite mit einer vertikalen Bildlaufleiste einbettet und die Navigationsmenüs oben und links auf der Seite ausschneidet. Ich konnte es mit etwas einfachem HTML und CSS machen.

HTML

<div id="container">
    <iframe id="embed" src="http://www.example.com"></iframe>
</div>

CSS

div#container
{
    width:840px;
    height:317px;
    overflow:scroll;     /* if you don't want a scrollbar, set to hidden */
    overflow-x:hidden;   /* hides horizontal scrollbar on newer browsers */

    /* resize and min-height are optional, allows user to resize viewable area */
    -webkit-resize:vertical; 
    -moz-resize:vertical;
    resize:vertical;
    min-height:317px;
}

iframe#embed
{
    width:1000px;       /* set this to approximate width of entire page you're embedding */
    height:2000px;      /* determines where the bottom of the page cuts off */
    margin-left:-183px; /* clipping left side of page */
    margin-top:-244px;  /* clipping top of page */
    overflow:hidden;

    /* resize seems to inherit in at least Firefox */
    -webkit-resize:none;
    -moz-resize:none;
    resize:none;
}

Benutzeravatar von Shuvojit Das
Shuvojit Das

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

Benutzeravatar von TangentSpy
TangentSpy

Irgendwie habe ich herumgefummelt und einige, wie ich es zum Laufen gebracht habe:

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

Ich denke, dies ist das erste Mal, dass dieser Code gepostet wurde, also teilen Sie ihn

  • Ich denke, dieses #inside sollte Teil einer externen Website sein, die nicht unter unserer Kontrolle steht.

    – Kurcula

    6. September 2017 um 20:20 Uhr

Benutzeravatar der Community
Gemeinschaft

Stellen Sie den Iframe auf die entsprechende Breite und Höhe ein und setzen Sie das Scrolling-Attribut auf “no”.

Wenn sich der gewünschte Bereich nicht oben links auf der Seite befindet, können Sie den Inhalt zum entsprechenden Bereich scrollen. Beziehen Sie sich auf diese Frage:

Iframe mit Javascript scrollen?

Ich glaube, Sie können nur scrollen, wenn sich beide Seiten auf derselben Domain befinden.

  • Ich denke, dieses #inside sollte Teil einer externen Website sein, die nicht unter unserer Kontrolle steht.

    – Kurcula

    6. September 2017 um 20:20 Uhr

Benutzeravatar von Stephen Ostermiller
Stephan Ostermüller

Angenommen, Sie verwenden einen Iframe, um öffentlich zugängliche Inhalte, die Ihnen nicht gehören, in Ihre Website zu importieren, dann können Sie den Seitenanker immer verwenden, um Ihren Iframe so zu laden, dass er dort geladen wird, wo Sie ihn haben möchten.

Zuerst erstellen Sie einen Iframe mit der Breite und Höhe, die zum Anzeigen der Daten erforderlich sind.

<iframe src="http://www.example.com/page2.html" width="200px" height="100px"></iframe>

Zweitens installieren Sie ein Add-on wie Show Anchors 2 für Firefox und verwenden Sie es, um alle Seitenanker auf der Seite anzuzeigen, die Sie in Ihrem Iframe anzeigen möchten. Suchen Sie den Ankerpunkt, den Ihr Frame verwenden soll, und kopieren Sie die Ankerposition, indem Sie mit der rechten Maustaste darauf klicken.

(Sie können das Plugin hier herunterladen und installieren => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/)

Drittens verwenden Sie die kopierte Webadresse mit Ankerpunkt als Iframe-Quelle. Wenn der Frame geladen wird, zeigt er die Seite ab dem von Ihnen angegebenen Ankerpunkt an.

<iframe src="http://www.example.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>

Das ist die komprimierte Anweisungsliste.

1429750cookie-checkKann ein Iframe nur einen bestimmten Teil der Seite anzeigen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy