69 votes

Comment ouvrir une nouvelle fenêtre et y insérer du html en utilisant jQuery ?

J'essaie d'ouvrir une nouvelle fenêtre à partir de javascript mais rien n'est inséré dans le html :

var callScriptText = $('#callScriptText').html();
var url = '/Action/CallScript/?callScript=';

// Open the current call script in a new window
var openWindow = window.open(url, 'callScriptPopup', 'width = 500, height = 500');
$(openWindow).html(callScriptText);

Quelqu'un sait-il pourquoi ?

118voto

Juanma Points 700

Voici un exemple pour ouvrir une nouvelle fenêtre avec du contenu en utilisant jQuery

<script>
function nWin() {
  var w = window.open();
  var html = $("#toNewWindow").html();

    $(w.document.body).html(html);
}

$(function() {
    $("a#print").click(nWin);
});​
</script>

<div id="toNewWindow">
    <p>Your content here</p>
</div>

<a href="javascript:;" id="print">Open</a>​

EDIT : Pour ceux qui disent que ce code ne fonctionne pas, voici un jsfiddle pour l'essayer http://jsfiddle.net/8dXvt/

0 votes

Merci, ça a marché ! Mais comment ajouter une url pour que ça ne dise pas seulement about:blank ?

0 votes

Si vous voulez l'URL dans la nouvelle fenêtre, remplacez simplement window.open par window.open('/Action/CallScript/?callScript=', 'myWin', 'width = 500, height = 500'); Cela chargera l'URL et placera ce nom dans la fenêtre. Vous pouvez également supprimer la ligne var html=$("#toNewWindow").html();

0 votes

Heureux de l'entendre. Je mets ma question comme OK et mon travail est terminé :)

88voto

Emre Points 1164

Essayez ça :

var x=window.open();
x.document.open();
x.document.write('content');
x.document.close();

Je constate que cela fonctionne dans Chrome et IE.

12 votes

Cela fonctionne mieux que la solution jQuery car vous pouvez écrire un document HTML entier, y compris le doctype et le <head> tags.

2 votes

Ne fonctionne pas dans mon chrome Version 51.0.2704.84 m. Le x après window.open() retourne undefined donc il n'a pas de document

0 votes

Une solution propre et simple

25voto

Sable Foste Points 1238

En s'appuyant sur la réponse de @Emre.

Avec javascript, vous pouvez enchaîner, donc j'ai juste modifié le code pour :

var x=window.open();
x.document.open().write('content');
x.close();

De même, pour forcer l'ouverture d'une nouvelle fenêtre (et non d'un nouvel onglet), donnez les dimensions de la première ligne. Mais il faut que ce soit le troisième argument. Donc changez la première ligne en :

var x=window.open('','','width=600, height=600');

0 votes

Ce chaînage est un peu trop agressif, document.write() ne renvoie rien alors Chrome rapporte : Uncaught TypeError : Impossible de lire la propriété 'close' d'undefined.

0 votes

@jjrv, ce n'est pas un enchaînement agressif... vous devriez vérifier d'abord avant l'enchaînement... ex, if(content!=='undefined'){x.document.open().write(content).c‌​lose();}

1 votes

Document.write() renvoie toujours undefined, donc le code enchaîné appelle toujours undefined.close() et lève toujours une erreur.

3voto

Hasan A Yousef Points 4851

Essayez :

var x = window.open('', '', 'location=no,toolbar=0');
x.document.body.innerHTML = 'content';

0 votes

Fonctionne en chrome 70

0 votes

La question demandait spécifiquement une solution utilisant jquery.

2voto

Tejpal Sharma Points 150
var codeContents = $("#contentsfornewWindow").html()
var win = window.open('', 'title', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1000,height=1000,left=200,top=70');

win.document.body.innerHTML = codeContents;

VS :

win.document.write(codeContents);

J'ai remarqué qu'il y a des iframes comme les vidéos sur YouTube, win.document.write charge les iframes où comme document.body.innerHTML ne le fait pas !

0 votes

Vous avez une idée de la raison ? Comment pourrait-on éviter d'utiliser document.write() tout en étant capable de charger des ressources comme des images, des iframes etc ?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X