Kann ein Iframe nur einen bestimmten Teil der Seite anzeigen?

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]

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.

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 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;
}

<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>

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

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.

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.