iframe pour afficher uniquement une certaine partie de la page

Je travaille sur des iframes, et je dois montrer une certaine partie de la page [disons, en haut à droite] dans un iframe avec environ 300px de largeur et 150px de hauteur.

Exemple:

Disons que je voulais mettre une iframe de www.mywebsite.com/portfolio.php sur une page, mais que l’iframe est dimensionné pour afficher uniquement la section ” sports de portefeuille ” en haut à droite .

Comment puis-je atteindre cet objective ?

Merci.

EDIT : DEMO

[Merci à Pointy]

Un vous donne une fenêtre complète avec laquelle travailler. La manière la plus directe de faire ce que vous voulez est que votre serveur vous donne une page complète contenant uniquement le fragment que vous souhaitez afficher.

Comme alternative, vous pouvez simplement utiliser un simple

et utiliser la fonction “load” de jQuery pour charger toute la page et extraire uniquement la section souhaitée:

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

Il y a peut-être d’autres choses à faire, et la 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.

J’ai eu ce travail bien pour moi.

 

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

J’avais besoin d’un iframe incorporant une partie d’une page externe avec une barre de défilement verticale, en recadrant les menus de navigation en haut et à gauche de la page. J’ai pu le faire avec du HTML et du CSS simples.

HTML

 

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

D’une certaine manière, je sortingpotais et certains comment je l’ai fait fonctionner:

  

Je pense que c’est la première fois que ce code a été posté alors partagez-le

Définissez l’iframe sur la largeur et la hauteur appropriées et définissez l’atsortingbut 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:

Faire défiler un iframe avec javascript?

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

En supposant que vous utilisez un iframe pour importer du contenu disponible au public mais que vous ne possédez pas sur votre site Web, vous pouvez toujours utiliser l’ancre de page pour vous diriger iframe afin de le charger où vous le souhaitez.

Vous commencez par créer un iframe avec la largeur et la hauteur nécessaires pour afficher les données.

  

Deuxième module d’installation tel que Show Anchors 2 for Firefox et utilisez-le pour afficher toutes les ancres de page sur la page que vous souhaitez afficher dans votre iframe. Trouvez le point d’ancrage que vous souhaitez que votre cadre utilise et copiez l’emplacement de l’ancre en cliquant dessus avec le bouton droit.

(Vous pouvez télécharger et installer le plugin ici => https://addons.mozilla.org/en-us/firefox/addon/show-anchors-2/ )

Troisièmement, utilisez l’adresse Web copiée avec le point d’ancrage comme source iframe. Lorsque le cadre est chargé, la page commence au point d’ancrage que vous avez spécifié.

  

C’est la liste d’instructions condensée. J’espère que cela aide!