web-dev-qa-db-fra.com

Comment rogner le contenu d'un Iframe pour afficher une partie d'une page?

Je travaille actuellement sur un site Web qui doit télécharger le contenu d'un autre site Web à l'aide d'un iframe. Est-il possible de rogner le contenu de la page téléchargée pour afficher uniquement une partie de cette page sur mon site Web?

12
Eon

Est-il possible de rogner le contenu de la page téléchargée pour afficher uniquement une partie de cette page sur mon site Web?

Non. La règle de même origine vous empêche de manipuler la iframe de quelque manière que ce soit, y compris la position de défilement. 

Il y aurait une solution de contournement en plaçant la iframe dans un conteneur div ayant une hauteur et une largeur définies et overflow: hidden pour couper le port de vue: 

<div style="width: 500px; height: 500px; overflow: hidden">

et en donnant à la iframe une position relative:

<iframe src="..." style="position: relative; left: -100px; top: -100px">

de cette façon, vous pouvez ajuster la partie de l'iframe visible sur la page. Cependant, la page entière est toujours restituée et cette approche n'est pas à l'abri d'influences telles que le défilement dans l'iframe.

28
Pekka 웃
<div style="position: absolute; 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://www.centricle.com/tools/html-entities/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

Ce code a fonctionné pour moi.

Source [ http://extechbuzz.blogspot.com/2012/12/iframe-how-to-display-specific-part-of.html ]

6
Razzak

Dans iframe, vous ne pouvez pas le faire ... mais si vous utilisez HTTPWebRequest/WebResponse, alors c'est très simple ...

http://www.codeproject.com/KB/IP/httpwebrequest_response.aspx

http://htmlagilitypack.codeplex.com/

Ce pack est très important ... vous pouvez lire div/span spécifique par id ...

1
Kishan Gajjar

Ce code a fonctionné pour moi ... Ajustez les marges supérieure et inférieure à la valeur qui vous convient le mieux et ajustez la hauteur et la largeur d'iframe à la valeur souhaitée. 

<html>
<div style="overflow: hidden; margin-top: -1440px; margin-left:0;">
<iframe src="https://fiitjeelogin.com/StartPage.aspx" scrolling="no" height="1550"width="300" frameBorder="0">
</iframe>
</div>
</html>
0
Sujit Kumar

Pour rogner les annonces au bas de la page incorporée , j'ai utilisé les éléments suivants:

<div style="width: 1000px; height: 390px; overflow: hidden">
<iframe src="https://openflights.org/user/dankohn1" width="1000"
height="600" style="border:none" scrolling="no">
</iframe></div>
0
dankohn