Question

我用代码打开了一个新窗口：

w = window.open("", "ventana", "status=1,width=350,height=150");

我在那里用

创建了一个表

var tresumen = w.document.createElement("table");

依此类推，等等......

一切正常，但是当应用CSS时，我发现新窗口没有读取我从主html引用的单独的css文件。在CSS中，table有一些像这样的行：

table {
        some attributes here;
}

我可以考虑让新窗口读取CSS的唯一方法是在新窗口的javascript中加入document.write，将html代码放入（再次）引用css文件，但由于它已在主html中引用，我不明白为什么这将是一种正确的方式......

这里我的错误是什么？

如何创建一个新窗口（没有自己的html！）读取主窗口正在使用的CSS？

谢谢！

Answer 1

您可以将样式复制到新窗口：

var stylesheets = document.querySelectorAll('style, link[rel="stylesheet"]');
stylesheets = Array.prototype.slice.call(stylesheets);
for (var i = 0; i < stylesheets.length; i++) {
    copyStyle(window, w, stylesheets[i]);
}

function copyStyle(from, to, node) {
    var doc = to.contentDocument;
    var newStyle = doc.createElement(node.tagName);
    if (node.textContent) {
        newStyle.textContent = node.textContent;
    } else if (node.innerText) {
        newStyle.innerText = node.innerText;
    }
    newStyle.type = node.type;
    newStyle.src = node.src;
    newStyle.rel = node.rel;
    doc.getElementsByTagName('head')[0].appendChild(newStyle);
}

Answer 2

如果没有在新窗口中加载或生成实际的HTML文档，您将依赖浏览器的标记 - 汤解释来理解您的标记。

那就是说，你必须将一个样式或链接元素附加到该窗口的DOM中，该DOM引用你的外部样式表。

Answer 3

这是一种ES6方式，但IE会讨厌它：

function copyStyles(sourceDoc, targetDoc) {
  Array.from(sourceDoc.styleSheets).forEach(styleSheet => {
    if (styleSheet.cssRules) { // for <style> elements
      const newStyleEl = sourceDoc.createElement('style');

      Array.from(styleSheet.cssRules).forEach(cssRule => {
        // write the text of each rule into the body of the style element
        newStyleEl.appendChild(sourceDoc.createTextNode(cssRule.cssText));
      });

      targetDoc.head.appendChild(newStyleEl);
    } else if (styleSheet.href) { // for <link> elements loading CSS from a URL
      const newLinkEl = sourceDoc.createElement('link');

      newLinkEl.rel = 'stylesheet';
      newLinkEl.href = styleSheet.href;
      targetDoc.head.appendChild(newLinkEl);
    }
  });
}

被盗：https://hackernoon.com/using-a-react-16-portal-to-do-something-cool-2a2d627b0202

不使用document.write将CSS样式应用于新窗口

3 个答案: