0

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

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 的唯一方法是将 adocument.write放在新窗口的 javascript 中，将 html 代码放在那里以引用（再次）css文件，但因为它已经在 main html，我不明白为什么这是一个正确的方法......

我的错误是什么？

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

谢谢！

4

3 回答 3

3

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

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);
}
于 2012-12-16T13:05:13.167 回答
1

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

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

于 2012-12-16T13:01:16.517 回答
0

这是一种 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

于 2018-05-01T16:15:15.397 回答