Est-ce qu'un iframe peut seulement montrer une certaine partie de la page?

Question

Je travaille sur les iframes, et j'ai besoin de montrer une certaine partie de la page [disons, en haut à droite] dans un iframe avec une largeur d'environ 300px et une hauteur de 150px.

Exemple :

Disons que je veux mettre un iframe de www.example.com/portfolio.php sur une page, mais avoir la taille de l'iframe pour montrer seulement la section "portfolio-sports" en haut à droite.

Comment puis-je y arriver ?

DEMO

[Merci à Pointy]

Answer 1

Un </code> vous offre une fenêtre complète avec laquelle travailler. Le moyen le plus direct de faire ce que vous voulez est d'avoir votre serveur vous fournir une page complète qui ne contient que le fragment que vous souhaitez afficher.</p> <p>En alternative, vous pourriez simplement utiliser un simple <code><div></code> et utiliser la fonction jQuery "load" pour charger toute la page et extraire uniquement la section que vous souhaitez : </p> <pre><code>$('#target-div').load('http://www.example.com/portfolio.php #portfolio-sports'); </code></pre> <p>Il peut y avoir d'autres choses que vous devez faire, et une différence significative est que le contenu fera partie de la page principale au lieu d'être séparé dans une fenêtre distincte.</p></x-turndown>

Answer 2

J'ai ce travail qui me convient bien.

Cela fonctionne-t-il pour vous ou non, faites le nous savoir.

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

Answer 3

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

HTML

CSS

div#container
{
    width:840px;
    height:317px;
    overflow:scroll;     /* si vous ne voulez pas de barre de défilement, définissez sur hidden */
    overflow-x:hidden;   /* masque la barre de défilement horizontale sur les navigateurs plus récents */

    /* redimensionner et la hauteur minimale sont facultatifs, permettent à l'utilisateur de redimensionner la zone visible */
    -webkit-resize:vertical; 
    -moz-resize:vertical;
    resize:vertical;
    min-height:317px;
}

iframe#embed
{
    width:1000px;       /* définissez ceci sur la largeur approximative de toute la page que vous embarquez */
    height:2000px;      /* détermine où bas de la page est coupée */
    margin-left:-183px; /* découpe le côté gauche de la page */
    margin-top:-244px;  /* découpe le haut de la page */
    overflow:hidden;

    /* redimensionner semble être hérité au moins dans Firefox */
    -webkit-resize:none;
    -moz-resize:none;
    resize:none;
}

Answer 4

D'une manière ou d'une autre, j'ai bidouillé et j'ai réussi à le faire fonctionner:

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

Answer 5

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

Si la zone que vous souhaitez n'est pas dans la partie supérieure gauche de la page, vous pouvez faire défiler le contenu vers la zone appropriée. Référez-vous à cette question:

Faire défiler un iframe avec javascript?

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