Accès au contenu html d'une page embarqué

Version imprimable

18/02/2010, 16h04
yan

Accès au contenu html d'une page embarqué

Bonjour.
Je cherche à embarquer une page html et de la manipuler.
Actuellement, ce qui me semble le plus propre est l'utilisation de la balise OBJECT.
En gros, j'ai une page html locale (sur un pc) qui va embarquer une page web (donc sur un domaine précis) et la manipuler.

Malheureusement, je n'arrive pas à manipuler le DOM de la page embarqué.

quelques questions :
1- es ce possible?
2- comment permettre à JQuery l'accés au DOM de la page embarqué?

merci
18/02/2010, 16h45
gui80

Bonjour Yan,

le chemin dom vers ta page embarquée est correct, c'est çà ?
Sinon, pour en être sur, vois un peu avec l'inspecteur de Firebug.

Après, je ne sais pas si c'est possible vraiment techniquement mais vérifions déjà si l'accès au chemin est correct.
18/02/2010, 16h51
yan

Citation:

Envoyé par gui80

Bonjour Yan,

le chemin dom vers ta page embarquée est correct, c'est çà ?

Sinon, pour en être sur, vois un peu avec l'inspecteur de Firebug.

Après, je ne sais pas si c'est possible vraiment techniquement mais vérifions déjà si l'accès au chemin est correct.

la page est bien embarquée.
Firebug et chrome montre bien le dom de la page dans la balise object.

Mais je n'arrive pas à manipuler ce dom. Par exemple cacher un div.

ps: je suis assez novice en dev html.
18/02/2010, 17h01
gui80

D'accord.

Donc, quand tu veux modifier un style à la volée avec firebug dans la page embarquée, çà ne prend pas alors que dans la page conteneur, le même type de style changé à la volée fonctionne, c'est çà ?
18/02/2010, 17h24
yan

Citation:

Envoyé par gui80

D'accord.

Donc, quand tu veux modifier un style à la volée avec firebug dans la page embarquée, çà ne prend pas alors que dans la page conteneur, le même type de style changé à la volée fonctionne, c'est çà ?

Avec firebug, je peut manipuler la page embarqué.
Avec JQuery, j'arrive a manipuler le DOM de la page principale, mais pas celle de la page embarqué.

Es ce que le fait que la page et la page embarqué ne sois pas sur le même domaine peut poser problème?
18/02/2010, 18h07
yan

En gros, ce que je cherche à faire :
1- avoir une page web avec des fonctionnalité simple
2- créé une autre page html qui va embarquer cette page pour ajouter des fonctionnalités et la manipuler.

Je sais que c'est un peu bizarre comme besoin.
Mais je fais une recherche de faisabilité.
Si ce n'est pas possible, il va falloir que je m'interface au webkit (java, objective C et Qt) pour manipuler cette page. Et c'est un peu dommage de réécrire trois codes différent pour faire la même chose. Si je pouvais le faire en html, cela simplifie les choses.
La seule contrainte, c'est que cette page doit être sur un domaine.
18/02/2010, 18h15
gui80

Ok, je vois.

Mais ta page embarquée, tu l'appelles via un object ?
J'ai essayé et ca ne marche pas. Montre juste comment tu as écrit ta balise object.

Pour tout te dire, étant un peu déconcerté par ce que tu recherches, j'ai du mal à dire si on peut réellement le faire, mais essayons.
18/02/2010, 19h56
yan

Citation:

Envoyé par gui80

Ok, je vois.

Mais ta page embarquée, tu l'appelles via un object ?

je n'ai pas trouvé d'autre solution. Peut être avec un frameset ou un iframe?

Citation:

J'ai essayé et ca ne marche pas. Montre juste comment tu as écrit ta balise object.

je vais tous refaire depuis le début et montrer un code propre.

Citation:

Pour tout te dire, étant un peu déconcerté par ce que tu recherches, j'ai du mal à dire si on peut réellement le faire, mais essayons.

je veux faire l'équivalent de ceci mais en html
http://code.google.com/intl/fr/apis/...ndroid_v3.html

merci pour l'aide :D
18/02/2010, 20h42
Bovino

Citation:

Envoyé par yan

Bonjour.
Je cherche à embarquer une page html et de la manipuler.
Actuellement, ce qui me semble le plus propre est l'utilisation de la balise OBJECT.
En gros, j'ai une page html locale (sur un pc) qui va embarquer une page web (donc sur un domaine précis) et la manipuler.

Malheureusement, je n'arrive pas à manipuler le DOM de la page embarqué.

quelques questions :
1- es ce possible?

Non, il n'est pas possible en JavaScript de manipuler le DOM d'un contenu hors domaine, voir la Same Origin Policy.

Citation:

Envoyé par Bovino

Non, il n'est pas possible en JavaScript de manipuler le DOM d'un contenu hors domaine, voir la Same Origin Policy.

merci. C'est ce que je viens de trouver.
http://docstore.mik.ua/orelly/webpro...pt/ch21_03.htm

Y as des solution avec du gros hack ou j'ai rien compris. Comme c'est du hack, je vais pas m'y aventurer
http://ajaxify.com/run/crossframe/

Si les deux pages sont sur le même domaine es ce que c'est possible avec un tag object au lieu de iframe.
Voici ce que j'ai fait qui marche si les deux fichiers sont sur le même domaine
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <head> <script type="text/javascript" src="jquery-1.4.1.min.js"/> <script type="text/javascript"> function b1() { $('#frame').contents().find('h2').hide("slow"); } function b2() { frame.hello(); } </script> </head> <body> <iframe SRC="test.html" id="frame" name="frame"></iframe><br/> <button onclick="b1()">hide</button> <button onclick="b2()">show</button> </body> </html>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <script type="text/javascript" src="jquery-1.4.1.min.js"/> <script type="text/javascript"> function hello() { $("h2").show("slow"); } </script> </head> <body BGCOLOR="red"> <h2>hello</h2> </body> </html>
test.html affiche "hello" dans une balise h2 et possède une fonction pour le rendre visible.

index.html embarque test.html dans une iframe et utilise deux bouton:

hide : accède au dom de test.html pour y appliquer un hide
show : appel la fonction définie dans test.html

Ca marche donc avec une iframe mais pas avec un object. De ce que j'ai vue iframe c'est le mal. Et la page est bien mieux intégré avec object.

Apparemment, ca marcherais aussi avec les frames et en utilisant parent.

18/02/2010, 22h39
danielhagnoul

Bonsoir.

Voir load() http://api.jquery.com/load/
18/02/2010, 22h59
yan

Citation:

Envoyé par danielhagnoul

Bonsoir.

Voir load() http://api.jquery.com/load/

j'avais testé mais cela ne fait que charger le html est l'appliquer telle quel(le texte). Il n'y as aucune prise en compte du javascript et du style.
18/02/2010, 23h59
danielhagnoul

Ce que l'on charge peut avoir sa propre feuille de style et son jQuery. Il est également possible d'intervenir depuis le HTML parent.

Il y a déjà eu des exemples pour iframe et pour le chargement de division sur le forum.
19/02/2010, 00h47
yan

Citation:

Envoyé par danielhagnoul

Ce que l'on charge peut avoir sa propre feuille de style et son jQuery. Il est également possible d'intervenir depuis le HTML parent.

Il y a déjà eu des exemples pour iframe et pour le chargement de division sur le forum.

après quelques tests,
j'arrive avec le load à accéder au DOM et à appeler certain script.
Par contre, tous ce qui est dans le header ne semble pas pris en compte.
Par exemple si une fonction est déclarée dans le head, je n'arrive pas à la trouver. Si la fonction est déclarée dans le body, ca marche.
Si le html n'est pas sur le même domaine, le load semble ne pas fonctionner.

Y as peut être un endroit ou je me suis planter :?

de plus ca ne marche que sur chrome :koi:
j'ai du faire uen erreur mais ou?

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
<html>
	<head>
		<script type="text/javascript" src="jquery-1.4.1.min.js"/>
		<script type="text/javascript">
			function b1()
			{
				$('h2').hide("slow");
			}
 
			function b2()
			{
				hello();
			}
			$(function(){$("#frame").load("test.html");});
		</script>
	</head>
	<body>
		<div id="frame" name="frame" ></div>
		<br>
		<button onclick="javascript:b1()">hide</button>
		<button onclick="javascript:b2()">show</button>
 
	</body>
 
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
	<head>
		<script type="text/javascript" src="jquery-1.4.1.min.js"/>		
	</head>
 
	<body BGCOLOR="red">
		<h2>hello</h2>
		<script type="text/javascript">
		function hello()
		{
				$("h2").show("slow");
		}
		</script>
	</body>
</html>

Bonjour.

On peut interagir dans les deux sens. Je préfère une iframe pour les contenus complexes et charger une division pour du HTML conditionnel, mais on peut toujours interagir.

Dans cet exemple, le fichier principal se nomme efface11.html, le contenu de l'iframe efface12.html et le contenu de la division efface13.html.

efface13.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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		div#container {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			font-size:0.8em;
		}
		div#montre {
			margin:12px;
			background-color:#FFFFFF;
			color:#000000;
		}
	</style>
</head>
<body>
	<div id="container">
		<button id="btn">Click</button>
		<div id="montre">
			<p>
				Un mot pour remplir
			</p>
		</div>
	</div>
	<script>
		$("#btn").click(function(){
			$("<div/>", {
				id:"affiche",
				html:"<p>" + (($.trim($("#montre").text()).length == 0)?("La division montre est vide"):("La division montre n'est pas vide")) + "</p>"
			}).appendTo("#conteneur");
		});
	</script>
</body>
</html>

efface12.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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		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: "Bitstream Vera Serif Bold", 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%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
 	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script>
		$(function(){
			$("#btnID").click(function(){
				$(window.parent.document).find("#conteneur").append("<p>Un mot pour remplir</p>");
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<button id="btnID" type="button">OK</button>
		<p>
			Pellentesque quam. Morbi ornare. Sed sodales laoreet felis. Maecenas adipiscing fermentum lorem. Aenean sed odio et nisl cursus dignissim. Pellentesque laoreet lacus a tortor. Vivamus sem risus, venenatis non, pretium a, tincidunt et, sem. Ut tincidunt velit cursus lorem. Aliquam fringilla mauris. Nunc sit amet diam. Fusce ullamcorper. Aliquam tempor, erat volutpat convallis tristique, ligula sapien pellentesque neque, vitae vulputate velit augue sodales ante. Mauris dapibus. Donec laoreet turpis eu dolor. Nam at sem quis justo vehicula venenatis. Phasellus tincidunt vestibulum ipsum.
		</p>
		<p>
			Quisque ac lacus. Aliquam erat volutpat. Vestibulum fringilla accumsan est. Mauris ipsum mauris, scelerisque vitae, aliquet aliquam, imperdiet sit amet, risus. Aliquam tincidunt. Vestibulum sit amet leo non dolor porttitor laoreet. Mauris convallis sagittis tortor. Integer eget purus et enim porttitor ullamcorper. Sed molestie nisi quis justo. Cras et enim. Mauris nec purus. Vestibulum vitae magna vel augue vehicula sodales. Fusce id justo. Fusce dolor nisi, tincidunt in, consectetur at, ornare rhoncus, eros.
		</p>
	</div>
</body>
</html>

efface11.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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		@font-face {
		  font-family: "Bitstream Vera Serif Bold";
		  src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
		}
		body {
			background-color:#dcdcdc;
			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: "Bitstream Vera Serif Bold", 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%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		#iframeID, #btnP {
			display:none;
		}
 	</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.1.min.js"></script>
	<script>
/*
Bonjour.
 
On peut interagir dans les deux sens. Je préfère une iframe pour les contenus complexes et charger une division pour du HTML conditionnel, mais on peut toujours interagir.
 
Dans cet exemple, le fichier principal se nomme efface11.html, le contenu de l'iframe efface12.html et le contenu de la division efface13.html.
*/
		$(function(){
			$("#btnIFrame").click(function(){
				$("#frameID").attr({
					margin: "12px",
					width: "600px",
					height: "400px",
					src: "efface12.html",
					overflow: "scroll"
				}).show();
 
				$(this).hide();
				$("#btnP").show();
			});
 
			$("#btnP").click(function(){
				$("#frameID").contents().find("p:eq(1)").before("<p>Un mot pour remplir</p>");
			});
 
			$("#montre").live("mouseenter", function(){
				$(this).css("color","red");
			});
 
			$("#montre").live("mouseleave", function(){
				$(this).css("backgroundColor","#dcdcdc");
			});
 
			$("#loaded").load("efface13.html");
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<h1>Un beau titre</h1>
		<p>
			<button id="btnIFrame" type="button">Charge iframe</button>
		</p>
		<iframe id="frameID" frameborder="0"></iframe>
		<p>
			<button id="btnP" type="button">Change P</button>
		</p>
		<div id="loaded"></div>
	</div>
</body>  
</html>

20/02/2010, 16h05
yan

merci beaucoup pour l'exemple.
très intéressant :D

Dernière question avant de mettre en résolue.
Si les pages ne sont pas sur le même domaine, tous ceci ne marchera pas;
C'est bien cela?
20/02/2010, 18h57
danielhagnoul

Bonsoir.

Je n'ai pas fait un test, mais...

Citation:

Envoyé par Bovino

Non, il n'est pas possible en JavaScript de manipuler le DOM d'un contenu hors domaine, voir la Same Origin Policy.
20/02/2010, 19h21
yan

Citation:

Envoyé par danielhagnoul

Bonsoir.

Je n'ai pas fait un test, mais...

ok c'était pour être sur d'avoir bien compris
:merci: