我该如何编辑 <head> 当我使用window.open打开一个新窗口时

Question

我正在尝试打开一个新窗口，并为我正在生成的报告传递一些生成的html。

我已经精简了源代码，但是以下是我的问题的有效示例。

    var windowUrl = "/";
    var uniqueName = new Date();
    var windowName = "Print" + uniqueName.getTime();
    var printWindow = window.open(
        windowUrl,
        windowName,
        "left=0,top=0,width=500,height=500"
    );

    var link = printWindow.document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
    printWindow.document.head.appendChild(link);
    printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
    printWindow.document.write('<p>Hello World</p>');
    printWindow.document.write('</div></section></div>');
    printWindow.document.close();
    printWindow.focus();

write方法的效果很好，我能够将所需的代码写入DOM，但它只会写入正文。 现在，我需要在标题中添加样式，标题等信息，但是我无法将我的标题代码添加到head标签中。

甚至可以写下新窗口的标题吗？ 即使在添加链接后，输出head标记时也是如此。

<head></head>

我不知道它是否相关，但是我正在使用ReactJS。 也许有其他选择。

Answer 1

您可以访问窗口的head节点，然后使用一些本机JavaScript DOM API：

var link = printWindow.document.createElement('link');
link.href = 'whatever';
printWindow.head.appendChild(link);

根据您的代码更新了示例：

var windowUrl = "/";
var uniqueName = new Date();
var windowName = "Print" + uniqueName.getTime();
var printWindow = window.open(
    windowUrl,
    windowName,
    "left=0,top=0,width=500,height=500"
);

printWindow.document.write('<div><section id="divToPrint"><div class="container page-sub">');
printWindow.document.write('<p>Hello World</p>');
printWindow.document.write('</div></section></div>');
printWindow.document.close();
printWindow.focus();
var link = printWindow.document.createElement('link');
link.rel = 'stylesheet';
link.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';
printWindow.document.head.appendChild(link);

我该如何编辑 <head> 当我使用window.open打开一个新窗口时

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-06 16:10:38

我该如何编辑 <head> 当我使用window.open打开一个新窗口时

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-06 16:10:38

解决方案1
0 已采纳 2018-09-06 16:10:38