如何打开一个新窗口并使用jQuery将HTML插入其中？

68

我正在尝试从javascript打开一个新窗口，但是没有插入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);

有人知道为什么吗？

javascript jquery html

— 仙女皇后
source

118

这是一个使用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>

编辑：对于那些说此代码不起作用的人，这里是一个jsfiddle尝试一下http://jsfiddle.net/8dXvt/

— 胡安马
source

谢谢你的工作！但是，我如何在其中添加一个URL，以便它不仅仅表示about：blank？

— FairyQueen 2012年

如果要在新窗口中输入URL，只需将window.open替换为window.open('/Action/CallScript/?callScript=', 'myWin', 'width = 500, height = 500');That，将加载URL并将该名称设置到窗口中。您也可以删除该行var html=$("#toNewWindow").html();

— Juanma 2012年

很高兴来到这里。将我的问题设置为OK，我的工作在这里完成：)

— Juanma 2012年

1

是否有可能插入html孔（如以下结构，而不是从身体放置<html><head><title></title><script></script><body></body></html>）

— Thirumalai murugan 2014年

1

您甚至还可以打开打印对话框：`function nWin（）{`var w = window.open（）; `var html = $（“＃toNewWindow”）。html（）; ``$（w.document.body）.html（html）; `w.print（）; `w.close（）; }

— CSQ，2016年

86

尝试这个：

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

我发现它可以在Chrome和IE中使用。

— 埃姆雷
source

11

这比jQuery解决方案更好，因为您可以编写整个HTML文档，包括doctype和<head>标签。

— 2013年

1

在我的Chrome版本51.0.2704.84 m中无法正常工作。window.open（）之后的x返回undefined，因此它没有文档

— LucVH

干净且简单的解决方案

— 索拉布·索兰基

谢谢！@LucVH添加到解决方案中，如果您的浏览器阻止了弹出窗口，则可以添加以下内容进行检查if(!x) alert('Enable popups please!)：Source：link

— Euler Ribeiro Sudbrack

似乎并没有在Chrome 70为我的工作-打开新的标签页

— DropHit

25

以@Emre的答案为基础。

使用javascript，您可以进行链接，因此我将代码修改为：

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

另外，要将其强制到新窗口（而不是新选项卡），请给出第一行尺寸。但这必须是第三个论点。因此，将第一行更改为：

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

— 黑貂
source

该链接有点过于激进，document.write（）不会返回任何内容，因此Chrome报告：Uncaught TypeError：无法读取未定义的属性“ close”。

— 2014年

@jjrv，这不是主动链接...您应该在链接之前先检查...，例如if(content!=='undefined'){x.document.open().write(content).close();}

— Sablefoste

1

document.write（）始终返回undefined，因此链接的代码始终调用undefined.close（）并始终引发错误。

— jjrv

在过去的好日子中，window.open参数不能有空格：P

— joe

3

尝试：

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

— 哈桑·优素福
source

在Chrome 70中工作

— DropHit

该问题专门要求使用jquery的解决方案。

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

我注意到是否有iframe（如youtube视频），win.document.write将iframe加载到document.body.innerHTML没有的位置！

— 特佩尔·沙玛（Tejpal Sharma）
source

你知道为什么吗？如何避免使用document.write（）但仍然能够加载图像，iframe等资源？

— D. Petrov