m2

子ウィンドウに親ウィンドウの CSS を継承させる

javascript css

普通に考えればこんな感じ。

    // 子ウィンドウを作成
    var w=window.open('about:blank','hoge','width=800,height=600,location=yes');
    var d=w.document;
    d.write('<html><head><title>'+document.title+' の子ウィンドウ<\/title><\/head>');
    d.write('<body>');
    /* (略) */
    d.write('<\/body><\/html>');
    d.close();
    // CSS をコピー
    var head=d.getElementsByTagName('head')[0];
    var styles=document.getElementsByTagName('link');
    for(var i=0;i<styles.length;i++){
        var link=styles[i];
        if(link.type!='text\/css') continue;
        var newlink=link.cloneNode(false);
        head.appendChild(newlink);
    }
    var styles=document.getElementsByTagName('style');
    for(var i=0;i<styles.length;i++){
        var style=styles[i];
        if(style.type!='text\/css') continue;
        var newstyle=style.cloneNode(true);
        head.appendChild(newstyle);
    }

が、IE6 では異なる document オブジェクト間で DOM ノードを使い回せないようで、appendChild でエラーになります。

「エラー：インターフェイスがサポートされていません」という、よくわからないエラーメッセージです。
しょうがないので document.styleSheets から css ルールを読み出して、「style 要素を動的に生成する」のやり方で style 要素を作成することにしました。

    // CSS をコピー
    var head=d.getElementsByTagName('head')[0];
    var styles=document.styleSheets;
    for(var i=0;i<styles.length;i++){
        var style=styles[i];
        if(style.type!='text\/css') continue;
        var title=style.title;
        var media=(typeof(style.media)=='object') ? style.media.mediaText
                                                  : style.media; // IE
        var s=[];
        s.push('<style type="text\/css" media="'+media+'" title="'+title+'">');
        if(style.cssText){ // IE
            s.push(style.cssText);
        }
        else if (style.cssRules){
            var rules=style.cssRules;
            for(var j=0;j<rules.length;j++){
                var rule=rules[j];
                s.push(rule.cssText);
            }
        }
        s.push('<\/style>');
        var wrap=d.createElement('div');
        wrap.innerHTML='a'+s.join('\n');
        head.appendChild(wrap.lastChild);
    }

メリットはサーバー側にログが残らないという点です。