js 向document注入css 的方法

js 向document注入css 的方法
应用场景：
向iframe内的document注入css，覆盖原有样式；

方法一：

// inject css to document
export function injectCssToDocument(document, iframeId) {
  let componyRelIframe = document.getElementById(iframeId);
  let iframeDoc = componyRelIframe.contentWindow.document;
  let iframeHead = iframeDoc.getElementsByTagName('head');
  let linkTag = document.createElement('link');
  linkTag.id = 'commonstyle';
  linkTag.href = `/static/css/commonstyle.css`;
  linkTag.setAttribute('rel', 'stylesheet');
  linkTag.setAttribute('type', 'text/css');
  iframeHead[0].appendChild(linkTag)
}

方法二：

/**
 * 在文档 iframeDocument 中添加样式
 * @param {*} iframeDocument
 * @param {*} cssText
 */
const addCSS = (iframeDocument, cssText) => {
    var style = iframeDocument.createElement('style'), //创建一个style元素
        head = iframeDocument.head || iframeDocument.getElementsByTagName('head')[0]; //获取head元素
    style.type = 'text/css'; //这里必须显示设置style元素的type属性为text/css，否则在ie中不起作用
    if (style.styleSheet) {
        //IE
        var func = function() {
            try {
                //防止IE中stylesheet数量超过限制而发生错误
                style.styleSheet.cssText = cssText;
            } catch (e) {}
        };
        //如果当前styleSheet还不能用，则放到异步中则行
        if (style.styleSheet.disabled) {
            setTimeout(func, 10);
        } else {
            func();
        }
    } else {
        //w3c
        //w3c浏览器中只要创建文本节点插入到style元素中就行了
        var textNode = iframeDocument.createTextNode(cssText);
        style.appendChild(textNode);
    }
    head.appendChild(style); //把创建的style元素插入到head中
};

参考：
向iframe嵌入页面注入css