Cibler un iframe [Résolu]

silvalooky · 31/07/2011, 01h34

Bonsoir tout le monde

la question que je pose ne doit pas être claire...

je veux insérer une iframe sur une page web. La dimension sera assez petite (400 * 200).

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Willpower · 31/07/2011, 02h02

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

Sélectionner tout - Visualiser dans une fenêtre à part

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)

provirus · 31/07/2011, 03h14

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

Willpower · 31/07/2011, 09h12

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.

provirus · 31/07/2011, 18h47

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

Willpower · 31/07/2011, 18h52

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.

provirus · 31/07/2011, 18h59

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.

silvalooky · 31/07/2011, 22h27

Citation:

Envoyé par Willpower

Exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Willpower · 01/08/2011, 01h14

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

Sélectionner tout - Visualiser dans une fenêtre à part

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>

silvalooky · 02/08/2011, 20h51

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

Sélectionner tout - Visualiser dans une fenêtre à part

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]

31/07/2011, 03h14	#3
provirus Membre confirmé Simon Levesque Consultant informatique Inscription : février 2009 Messages : 97 Détails du profil Informations personnelles : Nom : Simon Levesque Âge : 26 Localisation : Canada Informations professionnelles : Activité : Consultant informatique Secteur : Conseil Informations forums : Inscription : février 2009 Messages : 97 Points : 279 Points : 279	Tu peux aussi essayer le scrolling comme décris ici http://stackoverflow.com/questions/1...ith-javascript __________________ Blog - Tutoriels vidéos - Espace DVP
	00

31/07/2011, 18h59	#7
provirus Membre confirmé Simon Levesque Consultant informatique Inscription : février 2009 Messages : 97 Détails du profil Informations personnelles : Nom : Simon Levesque Âge : 26 Localisation : Canada Informations professionnelles : Activité : Consultant informatique Secteur : Conseil Informations forums : Inscription : février 2009 Messages : 97 Points : 279 Points : 279	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. __________________ Blog - Tutoriels vidéos - Espace DVP
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email