web-dev-qa-db-fra.com

iframe pour afficher uniquement une partie de la page

Je travaille sur des iframes et je dois montrer une certaine partie de la page (en haut à droite, par exemple) dans un iframe de 300 pixels de large et 150 pixels de haut.

Exemple:

Disons que je voulais mettre un iframe de www.mywebsite.com/portfolio.php sur une page, mais l'iframe est dimensionné pour afficher uniquement la section " portfolio-sports " à l'emplacement suivant en haut à droite .

Comment puis-je atteindre cet objectif ?

Merci.

[~ # ~] éditer [~ # ~] : DÉMO

[Merci à Pointy]

jqueryhtmlcss
58
MANnDAaR

Un <iframe> vous donne une fenêtre complète pour travailler. Le moyen le plus direct de faire ce que vous voulez est de demander à votre serveur de vous fournir une page complète ne contenant que le fragment que vous souhaitez afficher.

Comme alternative, vous pouvez simplement utiliser un simple <div> et utilisez la fonction "load" de jQuery pour charger la page entière et extraire uniquement la section souhaitée:

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

Il se peut que vous deviez faire autre chose, et une différence importante est que le contenu fera partie de la page principale au lieu d'être séparé dans une fenêtre séparée.

68
Pointy

J'ai eu ce travail bien pour moi.

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

Est-ce que cela fonctionne pour vous ou pas nous le faire savoir?.

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

28
Shiku gfa

J'avais besoin d'un iframe qui incorporerait une partie d'une page externe avec une barre de défilement verticale, en découpant les menus de navigation en haut et à gauche de la page. J'ai pu le faire avec du HTML simple et du CSS.

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

D'une manière ou d'une autre, je me suis débrouillé et comment je l'ai fait fonctionner:

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

Je pense que c'est la première fois que ce code est publié alors partagez-le

6
TangentSpy
<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>
6
Shuvojit Das

Définissez l'iframe sur la largeur et la hauteur appropriées et définissez l'attribut de défilement sur "non".

Si la zone souhaitée ne se trouve pas dans la partie supérieure gauche de la page, vous pouvez faire défiler le contenu vers la zone appropriée. Reportez-vous à cette question:

Défilement d'un iframe avec javascript?

Je pense que vous ne pourrez le faire défiler que si les deux pages sont sur le même domaine.

2
Arctic Fire