javascript openclassroom définir innerHTML d'un iframe




javascript innerhtml value (4)

En javascript, comment puis-je définir le innerHTML d'un iframe? Je veux dire: comment définir, pas get .

window["ifrm_name"].document.innerHTML= "<h1>Hi</h1>" ne fonctionne pas, et il en va de même pour les autres solutions.

Iframe et le document parent sont sur le même domaine.

Je devrais définir html du document entier iframe, pas son corps.

Je devrais éviter la solution de jquery.


Il y a aussi l'attribut srcdoc :

<iframe srcdoc="<p><h1>Hello</h1> world</p>"></iframe>

Demo , Polyfill .


En améliorant mes téléchargements de fichiers dans un env AJAXS, j'avais le même besoin. Cela a fonctionné pour moi dans ie8 et ff 22.0. Le corps innerhtml et div innerhtml fonctionnent tous deux.

function copyframedata(data) {
  var x = document.getElementById("photo_mgr_frame");
  var y = x.contentWindow || x.contentDocument;
  if (y.document) y = y.document;
  y.getElementById('photo_mgr_mb').innerHTML = data;
}

obtenu de w3


Un exemple vraiment simple ...

<iframe id="fred" width="200" height="200"></iframe>

alors le Javascript suivant est exécuté, que ce soit en ligne, dans le cadre d'un événement, etc.

var s = document.getElementById('fred');
s.contentDocument.write("fred rules");

le "contentDocument" est l'équivalent du "document" que vous avez dans la fenêtre principale, vous pouvez donc faire des appels pour définir le corps, la tête, tous les éléments à l'intérieur, etc.

Je l'ai seulement testé dans IE8, Chrome et Firefox ... donc vous pouvez tester dans IE6 / 7 si vous avez des copies disponibles.


Dans Firefox et Chrome (ne connaissez pas Opera), vous pouvez utiliser le schéma data: URI .

 <iframe src=".... data: URI data here ......">

JSFiddle exemple

Here un outil pour générer des données: données encodées en URI.

Cela ne fonctionne pas dans IE :

Pour des raisons de sécurité, les URI de données sont limités aux ressources téléchargées. Les URI de données ne peuvent pas être utilisés pour la navigation, pour les scripts ou pour remplir des éléments frame ou iframe.

Si toutefois, comme vous le dites dans le commentaire, obtenir / définir le corps du document est suffisant, vous êtes beaucoup plus facile à utiliser l'un des exemples liés.





innerhtml