iframe, récuperer des infos

HwRZxLc4 · 24/06/2010, 14h20

Bonjour,

Je voudrais savoir si il est possible de récupérer des infos genre url cliqué et titre de la page en cours ?

Je m'explique dans une iframe j'ai une page html, si je clic sur un lien qui pointe ver un autre site, je voudrais récupérer l'url du site et son titre.

J'ignore si c'est possible et surtout si ça fonctionne sur tout navigateur.

Merci d'avance pour votre aide.

Librement.

**danielhagnoul** · 29/06/2010, 00h59

Bonsoir.

Ce point a déjà été discuté sur le forum, mais un petit rappel n'est pas inutile.

Voici un exemple avec dans l'ordre, la page contenant l'iframe avec un accès au contenu de l'iframe et la page contenue dans l'iframe avec un accès vers son parent.

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Page contenant l'iframe</title>
	<style type="text/css">
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			border:1px solid #999999;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
	<script>
		$(window).load(function(){
			var h = $("#frameID").contents().find("#conteneur").outerHeight();
 
            console.log(h);
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<div id="affiche">
			<p>
				Sed porta. Sed non magna. Suspendisse ullamcorper pretium enim. Fusce iaculis vulputate lacus. Nulla facilisi. Etiam tincidunt dui ut erat. Donec non est. Maecenas sagittis, sem vitae dictum hendrerit, mi tellus ornare dolor, in euismod sapien diam a ante. Donec ullamcorper mollis lacus. Morbi sed arcu. Curabitur nec purus. Proin ut mauris. Quisque orci. Phasellus enim felis, faucibus in, placerat et, sagittis id, tellus. In eu sapien.
			</p>
		</div>
		<iframe id="frameID" src="../Provisoire/menuUL.html" width="500" height="400"></iframe>
	</div>
</body>
</html>

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Exemple de menu</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			height:500px;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		ul.ulext {
			display:none;
			margin-left:12px;
		}
		ul.ulext li {
			width:100px;
			height:60px;
			padding:6px;
			background-color:lightGreen;
			border:1px dotted grey;
		}
		ul.ulext li ul.ulext {
			margin-left:99px;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
 	<script>
		$(function(){
			$("ul.ulext:eq(0)").fadeIn("fast");
 
			$("ul.ulext li").hover(
				function(){
					$("ul.ulext:eq(0)", this).fadeIn("fast");
				},
				function(){
					$("ul.ulext:eq(0)", this).fadeOut("fast");
				}
			);
 
			// on peut agir sur la divsion d'id="conteneur" du parent
			$("a").click(function(){
				$(window.parent.document).find("#conteneur").prepend("<p>Lien = " + $(this).attr("href") + "</p>");
			});
		});
 
		$(window).load(function(){
			$(window.parent.document).find("#conteneur").prepend("<p>Titre = " + document.title + "</p>");
		});
	</script>
</head>
<body>
	<div id="conteneur">
 
		<ul class="ulext">
		  <li>
			<a href="http://developpez.com"><span>Lien 1</span></a>
		  </li>
		  <li>
			<a href="http://danielhagnoul.developpez.com"><span>Lien 2</span></a>
			<ul class="ulext">
			  <li>
				<a href="http://developpez.com"><span>Lien 2.1</span></a>
			  </li>
			  <li>
				<a href="http://developpez.com"><span>Lien  2.2</span></a>
				<ul class="ulext">
				  <li>
					<a href="http://developpez.com"><span>Lien 2.2.1</span></a>
				  </li>
				  <li>
					<a href="http://developpez.com"><span>Lien  2.2.2</span></a>
				  </li>
				</ul>
			  </li>
			</ul>
		  </li>
		</ul>
 
	</div>
</body>
</html>

HwRZxLc4 · 29/06/2010, 08h37

Re bonjour,

OK, comme ça je comprend mieux, il mes donc impossible de mapper le titre et l'url d'un site chargé dans cette iframe ?

Genre je charge google.fr dans une iframe et quand je clic sur maps je ne sais pas récupéré le titre et l'url de la page maps ?

**danielhagnoul** · 30/06/2010, 01h10

Bonsoir.

Je pensais avoir montré les différentes possibilités. Mais voici un code plus précis.

Dans la page qui contient l'iframe :

Code :

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

1
2
3
4
5
6
$(window).load(function(){
	var obj = $("#frameID").contents();
 
	console.log("href = " + obj[0].location.href);
	console.log("title = " + obj[0].title);
});

HwRZxLc4 · 01/07/2010, 21h06

Je viens de tester en local et il me crache cette erreur

Code :

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

1
2
Permission refusée à <http://localhost> d'obtenir la propriété HTMLDocument.location de <http://www.google.fr>.
[Break on this error] console.log("href = " + obj[0].location.href);

**danielhagnoul** · 02/07/2010, 00h00

Bonsoir.

Les interdictions inter-domaines sont toujours valables.

HwRZxLc4 · 02/07/2010, 22h03

Bonsoir,

D'apprêt votre réponse je doit faire le test en ligne avec un vrais domaine et je risque aussi d'avoir certain site qui ne passe pas non plus ?

**danielhagnoul** · 03/07/2010, 00h39

Bonsoir.

Voir : http://www.developpez.net/forums/d93...n/#post5251520

HwRZxLc4 · 03/07/2010, 09h25

Ok merci.

iframe, récuperer des infos

jQuery

Discussions similaires

Partager

Partager