Cibler un iframe

Version imprimable

Cibler un iframe

Bonsoir tout le monde 8-)
la question que je pose ne doit pas être claire... :aie:

je veux insérer une iframe sur une page web. La dimension sera assez petite (400 * 200). :mouarf:
ce que je veux voir dans cette iframe se trouve sur une autre page web (un tableau au milieu).
Quand je donne l'adresse de cette page web dans mon iframe (eurosport), il me montre la partie en haut à gauche de ma page cible et je ne vois pas la partie qui m’intéresse : le tableau). ;)
je sais que le IFRAM seul est unitule car il est figé, donc je dois rajouter dans mon code html 4 fonction pour commander le haut et le bas, ladroite, et la gauche pour pouvoir cibler mon iframe sur une zone précise :P

j'ai commencé par des testes mais comme je suis nouveau au javascript, j’arrive pas à continue! :(
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <script type="text/javascript"> function setIframeHeight(iframeName) { //var iframeWin = window.frames[iframeName]; var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null; if (iframeEl) { iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous //var docHt = getDocHeight(iframeWin.document); // need to add to height to be sure it will all show var h = alertSize(); var new_h = (h-148); iframeEl.style.height = new_h + "px"; //alertSize(); } } function alertSize() { var myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { //IE 4 compatible myHeight = document.body.clientHeight; } //window.alert( 'Height = ' + myHeight ); return myHeight; } </script> </head> <body onload="setIframeHeight('ifrm');" onresize="setIframeHeight('ifrm');">
Merci pour votre aide :zoubi:

31/07/2011, 02h02
Willpower
Houla, ton code fait peur, IE4 ça a un jour existé ?

Ensuite, je ne comprend pas ce que tu essaies de faire avec ton code.
Modifier la taille de ton iframe ne va pas modifier la position de son contenu.

Enfin bref, d'après ce que tu décris comme problème, je te proposerai comme solution (si ta page cible affiche toujours l'information voulu au même endroit) de créer une iframe de grande taille (pour être sûr que la zone voulue soit visible sans scroller) et de placer cette iframe(centrer le contenu voulu) dans un div en cachant ce qui en dépasse.

Exemple:
Code:

1 2 3 <div style="width:400px;height:200px;overflow:hidden;"> <iframe style="width:1000px;height:1000px;left:-400px;top:-200px;" src="http://www.site_que_je_veux_leecher.com" /> </div>
(pas besoin de javascript dans ce cas)
31/07/2011, 03h14
provirus

Tu peux aussi essayer le scrolling comme décris ici http://stackoverflow.com/questions/1...ith-javascript
31/07/2011, 09h12
Willpower

Citation:

Envoyé par provirus

Tu peux aussi essayer le scrolling comme décris ici http://stackoverflow.com/questions/1...ith-javascript

Il me semble à nouveau que ce n'est valide que si la frame est sur le même domaine.
31/07/2011, 18h47
provirus

Effectivement. C'est pourquoi il ajoute aussi cette solution plus bas dans la page:

Citation:

you can circumvent the same origin policy by having doubling up on iframes. Your main page embeds an iframe to a shim page on your own server. The shim page in turn just embeds an iframe of the foreign page. The master page can scroll the shim page since they're in the same origin. Ugly, but it works
31/07/2011, 18h52
Willpower

Citation:

Envoyé par provirus

Effectivement. C'est pourquoi il ajoute aussi cette solution plus bas dans la page:

Autant utiliser un div(comme je l'ai fait) alors, c'est moins laid qu'une 2ème iframe il me semble.
31/07/2011, 18h59
provirus

C'était juste pour donner plus de choix et donner un exemple avec Javascript si jamais une autre personne préfère cela ou si c'est local.
31/07/2011, 22h27
silvalooky
Citation:
Envoyé par Willpower

Exemple:

Code:

1 2 3 <div style="width:400px;height:200px;overflow:hidden;"> <iframe style="width:1000px;height:1000px;left:-400px;top:-200px;" src="http://www.site_que_je_veux_leecher.com" /> </div>

(pas besoin de javascript dans ce cas)
Merci bien, pour vous réponse: Willpower, Provirus :ccool: mais je trouve la solution de Willpower est la plus simple.
M. Willpower, sa marche bien dans le coter gauche et droite avec le <div> mais apparemment on peux pas contrôler le Haut de la page, pour cibler un contenu qui se trouve au milieu?
Code:

1 2 3 4 <div style="width:400px;height:200px;overflow:hidden;"> <iframe style="width:1000px;height:1000px;left:-400px;top:-200px;" src="http://fr.eurosport.anayou.com/" /> </div>

tu dois ajuster le paramètre top auquel j'ai donné au hasard la valeur -200px

edit: oups, j'ai oublié, tu dois mettre "position:absolute";
edit2: et ajoute l'option "scrolling=no", ce sera plus propre à mon avis.
edit3: il faut aussi donner un type de position(par ex: relative) au div sinon il ne tiens pas compte du height(en tout cas sous chrome)
Code:

1 2 3 <div style="position:relative;width:400px;height:200px;overflow:hidden;"> <iframe scrolling=no style="position:absolute;width:1000px;height:1000px;left:-400px;top:-200px;" src="http://fr.eurosport.anayou.com/" /> </div>

Citation:
edit1: Tu dois mettre "position:absolute";
edit2: et ajoute l'option "scrolling=no", ce sera plus propre à mon avis.
edit3: il faut aussi donner un type de position(par ex: relative) au div sinon il ne tiens pas compte du height (en tout cas sous chrome)
Code:

1 2 3 <div style="position:relative;width:400px;height:200px;overflow:hidden;"> <iframe scrolling=no style="position:absolute;width:1000px;height:1000px;left:-400px;top:-200px;" src="http://fr.eurosport.anayou.com/" /> </div>
Merci beaucoup Wellpower, sa marche bien donc c'est [Résolu] :ccool: