iframe, récuperer des infos

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.

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:

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:

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>

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 ?

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:

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

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

Code:

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

Bonsoir.

Les interdictions inter-domaines sont toujours valables.

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 ?

Bonsoir.

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

Ok merci.