新しいスタイルシート新しいウィンドウで

Question

目的：新しいウィンドウを開いて要素を挿入し、外部スタイルシートを使用して新しいウィンドウの要素にCSSスタイルを適用します。

問題：新しいウィンドウの要素に新しい要素を挿入し、外部のスタイルシートへのリンク要素を持つように新しいウィンドウ要素を取得できますが、新しいウィンドウ要素はスタイルシートの影響を受けません。

フィドル https://jsfiddle.net/1f2per3s/

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> 

Answer 1

あなたがアドレスバーに見れば、URLがウェブサイト上にない（でChrome、それはabout:blankです）。あなたのスタイルシートへのパスは相対的で、見つからない。

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

https://jsfiddle.net/3xhrnpsa/（テキストサンセリフを行い、デモ用のブートストラップのCSSを使用して）