Question

我有一个页面，我打开一个新窗口

var myWindow = window.open("", "", "width=755.9100,height=347.7200");
myWindow.document.body.append(img);

我想从上一个窗口

向这个新窗口添加一些样式的样式

@page {size: A4;margin: 0;@media print {html, body {width: 210mm;height: 297mm;}

如何将这个添加到html到js中的head标签？

Answer 1

js中有window.matchMedia函数：

用法非常简单：

if (window.matchMedia("(min-width: 400px)").matches) {
    /* the viewport is at least 400 pixels wide */
} else {
    /* the viewport is less than 400 pixels wide */
}

另一篇有用的文章是here。

Answer 2

style也是一个HTML元素，因此您可以使用与追加img元素类似的方式附加该元素

var myWindow = window.open("", "", "width=755.9100,height=347.7200");
myWindow.document.body.append(img);
var style = myWindow.document.createElement("style")
style.innerHTML = "@page {size: A4;margin: 0;@media print {html, body {width: 210mm;height: 297mm;}"
myWindow.document.head.append(style);

Answer 3

请注意，检查MediaQueryList.matches实际上不会向CSS添加媒体查询。每次窗口更改时，您都必须运行此检查。为此，除了直接检查addListener(callback)属性外，还应该在MediaQueryList上调用matches。

例如，将样式应用于打印页面上的<html>和<body>元素：

let mediaQueryList = window.matchMedia("print");
function screenTest(e) {
    if (e.matches) {
        document.documentElement.style.width = "210mm";
        document.body.style.width = "210mm";
        document.documentElement.style.width = "297mm";
        document.body.style.width = "297mm";
    }
    else {
        document.documentElement.style.width = null;
        document.body.style.width = null;
    }
}
screenTest(mediaQueryList);
mediaQueryList.addListener(screenTest);

从js

3 个答案: