如何为页面内多个iframe统一应用同一份CSS样式文件

问题核心原因 #

• 单个DOM节点无法被重复插入到不同父容器：每次调用appendChild插入同一个节点时，浏览器会将该节点从原有位置移动到新位置，所以仅创建1个link节点的话，最终只会保留在最后一次插入的iframe内，其余iframe都没有样式节点。
• 第一种写法执行顺序错误：先插入link节点再调用doc.open()、doc.write()，这两个API会清空iframe内已有的全部DOM内容，刚插入的link节点会被直接清除，自然无法生效。

正确实现代码 #

function dm_on()
{
    var iframes  = document.getElementsByTagName('iframe');

    for (var i = 0, len = iframes.length, doc; i < len; ++i) 
    {
        doc = iframes[i].contentDocument || iframes[i].contentWindow.document;
        // 先完成内容写入、开启编辑模式
        doc.open();
        doc.write(ta_text[i]);
        doc.close();
        doc.designMode = 'On';
        // 每个iframe单独创建全新的link节点
        var cssLink  = document.createElement("link");
        cssLink.href = "style.css"; 
        cssLink.rel  = "stylesheet"; 
        cssLink.type = "text/css";
        doc.head.appendChild(cssLink);
    }
}

内容的提问来源于stack exchange，提问作者Paddy Egan