javascript中子窗口如何从父窗口继承css样式？

Posted 2023-05-08

【中文标题】javascript中子窗口如何从父窗口继承css样式？

【英文标题】：How does child window inherit css style from parent window in javascript?

【发布时间】：2019-01-21 08:06:05

【问题描述】：

我写了一个函数来创建一个新的窗口（子窗口）。

        openReportsWindow:function(content)
        window.name = "parentWin";
        var h = screen.height;
        var w = screen.width;
        if(window.childWrep == null)
            var childWrep = window.open("", 'repWin','left=0,top=0,resizable=yes,status=yes,width='+w +',height=' +h+'');
            childWrep.document.write(content);
            childWrep.document.close();
            childWrep.name = 'repWin';
            window.childWrep = childWrep;
         else 
            window.blur();
            if(window.childWrep.closed == false)
                childWrep.document.write(content);
                childWrep.document.close();
                setTimeout(function()window.childWrep.focus(),1000);
             else
                var childWrep = window.open("", 'repWin','left=0,top=0,resizable=yes,status=yes,width='+w +',height=' +h+'');
                childWrep.document.write(content);
                childWrep.document.close();
                childWrep.name = 'repWin';
                window.childWrep = childWrep;
            
        
    

并以这种方式将html放入这个子窗口中。

        render : function() 

        var context = 
                data: data
                ...
        ;

        this.openReportsWindow(this.template(context));

    

这就是问题所在。 你如何从父窗口继承css样式？ 以及如何在子窗口中触发事件？

【问题讨论】：

要么将 css 写入窗口头部的 <style> 标记，就像使用其他 HTML 一样（包括在模板中）。或者插入指向您要使用的样式表的链接。如果子窗口主要是静态内容，我实际上会为它创建一个单独的 HTML 页面并使用 window.open() 打开它，而不是从父窗口内部完全填充它。

我猜问题的措辞是错误的，它的意思是“你如何从父窗口继承 css 样式”和“你如何在子窗口中触发事件”跨度>

@epascarello 感谢您的纠正。这就是我想问的。

【参考方案1】：

要复制父样式，您可以使用 .style 属性，只需为父元素和子元素使用元素选择器，并将 child.style 属性分配给 parents.style。

例子：

let $parent = document.getElementById('parenID')
let $child = document.getElementById('childID')
$child.style = parent.style

【讨论】：

父窗口和子窗口之间如何实现？