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

**yan** · 18/02/2010, 16h04

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

**gui80** · 18/02/2010, 16h45

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.

**yan** · 18/02/2010, 16h51

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.

**gui80** · 18/02/2010, 17h01

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 çà ?

**yan** · 18/02/2010, 17h24

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?

**yan** · 18/02/2010, 18h07

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.

**Bovino** · 18/02/2010, 20h42

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.

**yan** · 18/02/2010, 22h10

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

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

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

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.

**danielhagnoul** · 18/02/2010, 22h39

Bonsoir.

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

**yan** · 18/02/2010, 22h59

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.

**danielhagnoul** · 18/02/2010, 23h59

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.