web-dev-qa-db-fra.com

définir innerHTML d'un iframe

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

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.

J'aurais besoin de définir le code HTML du document entier iframe, pas son corps.

J'aurais besoin d'éviter la solution JQuery.

javascriptiframeinnerhtml
21
tic

Un exemple très simple ...

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

ensuite, le code Javascript suivant est exécuté, 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 obtenez dans la fenêtre principale, vous pouvez donc faire des appels à ce sujet pour définir le corps, la tête, tous les éléments à l'intérieur, etc.

Je n'ai testé cela que dans IE8, Chrome et Firefox ... vous pouvez donc tester dans IE6/7 si vous en avez des copies.

27
Jeff Parker

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

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

Exemple JSFiddle

Here est un outil permettant de générer des données: données encodées en URI.

Ceci ne 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 suffit, il est beaucoup plus facile d'utiliser l'un des exemples liés.

7
Pekka 웃

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

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

1
johnny3

Il y a aussi l'attribut srcdoc:

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

Démo , Polyfill .

0
nha