Wie öffne ich ein neues Fenster und füge HTML mit jQuery ein?

68

Ich versuche, ein neues Fenster aus Javascript zu öffnen, aber es wird nichts in das HTML eingefügt:

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);

Weiß jemand warum?

javascript jquery html Feen Königin
quelle

Antworten:

118

Hier ist ein Beispiel zum Öffnen eines neuen Fensters mit Inhalten mithilfe von 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: Für diejenigen, die sagen, dass dieser Code nicht funktioniert, ist hier eine jsfiddle, um es zu versuchen http://jsfiddle.net/8dXvt/

Juanma
quelle
Danke das hat funktioniert! Aber wie füge ich eine URL hinzu, damit nicht nur Folgendes steht: leer?
FairyQueen
Wenn Sie die URL im neuen Fenster haben möchten, ersetzen Sie einfach das Fenster. Öffnen durch window.open('/Action/CallScript/?callScript=', 'myWin', 'width = 500, height = 500');Das lädt die URL und setzt diesen Namen in das Fenster. Sie können auch die Zeile löschenvar html=$("#toNewWindow").html();
Juanma
Freut mich das hier. Setzen Sie meine Frage als OK und meine Arbeit ist hier erledigt :)
Juanma
1
Gibt es eine Möglichkeit, das Loch HTML <html><head><title></title><script></script><body></body></html>
einzufügen
1
Sie können auch den Druckdialog öffnen: `function nWin () {` var w = window.open (); `var html = $ (" # toNewWindow "). html (); `` $ (w.document.body) .html (html); `w.print (); `w.close (); `}
CSQ
86

Versuche dies:

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

Ich finde, es funktioniert in Chrome und IE.

Emre
quelle
11
Dies funktioniert besser als die jQuery-Lösung, da Sie ein gesamtes HTML-Dokument einschließlich des Doctype und der <head>Tags schreiben können .
quietmint
1
funktioniert nicht in meinem Chrome Version 51.0.2704.84 m. Das x nach window.open () gibt undefiniert zurück, so dass es kein Dokument hat
LucVH
saubere und einfache Lösung
Saurabh Solanki
Vielen Dank! @ LucVH Wenn Ihr Browser das Popup blockiert, können Sie es überprüfen und hinzufügen if(!x) alert('Enable popups please!): Quelle: Link
Euler Ribeiro Sudbrack
Schien
25

Aufbauend auf der Antwort von @ Emre.

Mit Javascript können Sie verketten, also habe ich den Code einfach geändert zu:

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

Geben Sie außerdem die ersten Zeilenabmessungen an, um ein neues Fenster (keine neue Registerkarte) zu erzwingen. Aber es muss das dritte Argument sein. Ändern Sie also die erste Zeile in:

var x=window.open('','','width=600, height=600');
Sablefoste
quelle
Diese Verkettung ist etwas zu aggressiv. Document.write () gibt nichts zurück, daher meldet Chrome: Nicht erfasst TypeError: Die Eigenschaft 'close' von undefined kann nicht gelesen werden.
JJJV
@jjrv, das ist keine aggressive Verkettung ... Sie sollten zuerst vor der Verkettung überprüfen ... zBif(content!=='undefined'){x.document.open().write(content).close();}
Sablefoste
1
document.write () gibt immer undefined zurück, daher ruft der verkettete Code immer undefined.close () auf und gibt immer einen Fehler aus.
JJRV
In den guten alten Zeiten konnten die Parameter window.open auch keine Leerzeichen haben: P
Joe
3

Versuchen:

var x = window.open('', '', 'location=no,toolbar=0');
x.document.body.innerHTML = 'content';
Hasan A Yousef
quelle
Funktioniert in Chrom 70
DropHit
Die Frage wurde speziell nach einer Lösung mit jquery gestellt.
SouvikMaji
1 
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);

Ich habe bemerkt, wenn es Iframes wie youtubes Videos gibt, win.document.writelädt die Iframes wo wie document.body.innerHTMLnicht!

Tejpal Sharma
quelle
Hast du eine Idee warum? Wie kann man die Verwendung von document.write () vermeiden und trotzdem Ressourcen wie Bilder, Iframes usw. laden?
D. Petrov