[Résolu] Accéder à un élément dans un <object type=text/html>

Bonjour

Un problème à la mords moi le noeud

Tout est dans le titre. Je déclare un objet :

<object data="fondDePage.html" type="text/html">

Dans le dit fond de page, j'ai une déclaration de style st

  .st {
    position:absolute; left:52%; top:76.5%;
    display: none;}

et une image dans un div :

<div class="st" id="icone">
<img src="../imagesCouleur/icone.png" width="100%" height="100%">
</div>

Voilà, le décor est planté. Dans ce fichier fond de page, j'ai un script, capable de récupérer des paramètres d'appel de l'objet, par exemple :

<param name="montrerIcone" value="yes">

Lequel me permet de savoir si je dois afficher l'icone.

Eh bien, une fois ce paramètre récupéré (ça fonctionne) je suis incapable, dans mon script, d'accéder à l'élément div pour changer la propriété "display:none" en "display:block".

J'ai tout essayé : getElementById, getElementsByClassName, etc... que dalle !

Quelqu'un aurait une idée pour récupérer une branche de l'arbre du DOM interne à l'objet et aller jusqu'au noeud qui m'intéresse, et celà dans un script interne à cet objet ?
Modifié par JiPe38 (21 Mar 2013 - 20:44)

je pense que c'est ça:

window.parent.document.getElementById('icone');

A tester avec différent navigateurs, je ne suis pas sur qu'ils acceptent tous cette syntaxe.

Bah non, ça marche pas :

      var monDiv = window.parent.document.getElementById('icone');
      alert (monDiv) ;

Produit "null"...

Firefox 19.0.2
security.fileuri.strict_origin_policy;false

JiPe38 a écrit :

security.fileuri.strict_origin_policy;false

apparement tes deux pages ne sont pas sur le même domaine, donc question de sécurité javascript je pense.

Elyoukey a écrit :

apparement tes deux pages ne sont pas sur le même domaine, donc question de sécurité javascript je pense.

Je ne pense pas. Pour ce test mes pages (la page html principale et le fichier fondDePage.html) sont sur le même répertoire. J'ai mentionné la config de sécurité firefox pour expliquer justement que j'avais désactivé (false) la sécurité "same-origin" sur mon navigateur.
Non, c'est vraiment un problème d'accès au DOM dans un objet de type text/html. Je continue à chercher, mais je n'ai pas trouvé la réponse.

Bonjour,

Si je comprend bien tu as un script dans ton fichier fondDePage.html qui te permet de récupérer l'élément param de la page parente et tu n'arrives pas, après ça, à changer le style de #icone qui se trouve dans ce fond de page depuis ce même script ?

Quel est le code que tu as écrit pour essayer de changer le style de #icone ?
Modifié par Neol (21 Mar 2013 - 17:30)

Neol a écrit :
Bonjour,

Si je comprend bien tu as un script dans ton fichier fondDePage.html qui te permet de récupérer l'élément param de la page parente et tu n'arrives pas, après ça, à changer le style de #icone qui se trouve dans ce fond de page depuis ce même script ?

Quel est le code que tu as écrit pour essayer de changer le style de #icone ?

C'est bien ce que je veux réaliser. Je pensais écrire:

if (monParametre.indexOf('yes')>=0) 
then monDiv.style.display="block";
else monDiv.style.display="none".

Mais ça n'est pas ça qui pose problème. Le souci est que je n'arrive pas à récupérer l'objet monDiv (pointe sur l'élément <DIV> de mon fichier objet fondDePage.html).
Modifié par JiPe38 (21 Mar 2013 - 19:18)

Youpiiiiiii ! J'ai trouvé.

      var monObjet =  document.defaultView.frameElement ;
      var mondiv = monObjet.contentDocument.getElementById('icone') ;
      mondiv.style.display= 'block' ;

Comme pour se dégager d'un créneau : d'abord marche arrière, puis marche avant...

M'aura fait transpirer celui là !

Pas vraiment.

L'élément <object> d'HTML créé, dans ce cas, un contexte de navigation imbriqué dans le contexte de navigation de ta page principale. A la manière d'une <iframe> tu te retrouves avec une page html imbriquée dans une autre.

En javascript, l'objet window représente un contexte de navigation et il possède 3 propriétés qui te permettent de naviguer dans les contexte imbriqués :
- window.top : dans le cas de pleins de contextes imbriquées, récupère le tout premier contexte, celui à l'origine de tout.
- window.parent : récupère le contexte parent.
- window.frameElement : l'élément HTML issu du contexte parent et qui contient le contexte actuel.

Un contexte possède une représentation de la page qu'il contient et que tu peux retrouver en javascript par :

window.document
// ou
this.document
// ou
document

Du coup si tu utilises l'une de ces trois notation tu récupères le DOM du contexte auquel est lié le code javascript.

Et finalement :

var mondiv = monObjet.contentDocument.getElementById('icone') ;
// devient
var mondiv = document.getElementById('icone');

J'espère avoir été clair, n'hésite pas à poser des questions si besoin.

Sinon, bonne continuation
Modifié par Neol (21 Mar 2013 - 22:27)

Neol a écrit :

J'espère avoir été clair, n'hésite pas à poser des questions si besoin.

En bien puisque tu m'y invites, pourquoi ta recommandation finale, à savoir écrire simplement:

document.getElementById() 

ne marche t'elle pas dans ce cas là ? Chez moi ça provoque une erreur, ou plutôt un résultat null. Tu as essayé, dans un <OBJECT type=text/html> ? Si oui et si ça passe, peux tu me dire sur quel navigateur ?
Modifié par JiPe38 (21 Mar 2013 - 22:56)

De mon côté j'ai reproduis les deux fichiers html suivants que j'ai mis dans le même répertoire sur ma machine.
Page1.html

<!doctype html>
<title>Page test</title>
<object id="page2" data="page2.html" type="text/html">
  <param name="changeColor" value="yes">
</object>

Page2.html

<!doctype html>
<style type="text/css">
  .st { font-family: monospace; }
</style>

<div class="st" id="icone"><h1>Coucou</h1></div>

<script type="text/javascript">
  if(this.frameElement.children[0].getAttribute('value') === 'yes')
    document.getElementById('icone').style.color = '#f00';
</script>

Il me semble que ça reproduis ton problème tel qu'il a été décrit.

Puis j'ai testé ça sous Firefox 19 et Chrome 22. Tout fonctionne.

@Neol : tu as raison, ton écriture marche. Après encore une heure, comparaison entre ton code et le mien, j''ai trouvé. J'avais mis ma récup de paramètre et la mise à jour du style sur mon icone tout en tête de ma page, dans un :

<body>
<script>
init()
</script>
etc...
<div class="st" id="icone">Coucou</div>
</body>

Donc je cherchais à accéder au noeud du DOM correspondant à mon <div> avant de l'avoir créé ! Mais alors pourquoi et comment ai-je pu faire marcher ce truc en empilant des fonctions de montée et redescente dans l'arbre, au lieu de passer mon script en fin de <body> ou de l'appeler par <body onload="init()"> ? Empiler des appels de fonctions modifierait il le timing d'un process qui interprète le javascript alors qu'un autre process consrtuit la page et son DOM ? Ou alors au fil des multiples essais infructueux que j'ai faits, ai-je tenté un <body onload..> ? Possible car, dans une sauvegarde ultérieure de mon fichier de test, c'est bien ce que je retrouve.

Bon, je crois bien que j'ai cherché midi à 14h. En tous cas merci, Neol pour le coup de main, et désolé, tout le monde, pour le dérangement.

De rien

Ça m'a permis d'apprendre ce qu'est un contexte de navigation et comment on passe de l'un à l'autre.

Tout le monde y gagne \o/
Modifié par Neol (22 Mar 2013 - 21:59)