新窗口中的外部样式表答案

【问题标题】：External stylsheets in new window新窗口中的外部样式表
【发布时间】：2016-05-22 01:32:45
【问题描述】：

目标：打开一个新窗口，插入元素，然后使用外部样式表将css样式应用于新窗口中的元素。

问题：我可以在新窗口中插入元素，让新窗口头元素具有链接到外部样式表的元素，但新窗口元素不受样式表的影响。

Javascript

$('.button').on('click', function() {
  let win = window.open();

  let link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', '/stylesheets/my.css');
  win.document.head.appendChild(link);

  let div = document.createElement('div');
  div.innerHTML = '<div> hello world</div>';
  win.document.body.appendChild(div);
});

HTML

<div class="container">
  <div class="button">
    test element
  </div>
</div>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

如果您查看地址栏，则该 URL 不在您的网站上（在 Chrome 中，它是 about:blank）。样式表的路径是相对的，找不到。

您可以通过使用完整的绝对 URL 来解决这个问题：

link.setAttribute('href', 'http://example.org/stylesheets/my.css');

https://jsfiddle.net/3xhrnpsa/（使用 bootstrap 的 CSS 进行演示，使文本无衬线）

【讨论】：