javascript - 制作一个html+css页面独立静态

Question

我正在尝试制作一个“静态”网页，所有样式都是内联的。为此，我首先保存所有计算样式，然后删除所有应用的样式(类和 css 文件)，检查与保存样式的差异并添加内联以查找缺失的样式。这是我的功能:

var allstyles=null;
var allelms=null;
function FixHTML()
{
    if (!allstyles)
    {
        console.log("remove scripts");
        var elms=document.getElementsByTagName('SCRIPT');
        for(var i=elms.length-1;i>-1;i--)
        {
            var elm=elms[i];

            if (elm.tagName=="SCRIPT" && !elm.innerHTML.match(/FixHTML/))
            {
                elm.parentElement.removeChild(elm);
            }
        }

        //sauvegarde des styles
        console.log("save styles");
        allstyles=[];

        allelms=document.getElementsByTagName('*');

        for(i=0;i<allelms.length;i++)
        {
            elm=allelms[i];
            if (!elm.id)
                elm.id="tmpid"+i;
            var id=elm.id;

            allstyles[id]=[];

            var style=getStyleObject(elm);
            for(var key in style)
            {
                allstyles[id][key]=style[key];
            }

            if (elm.className)
                elm.className="";
        }

        console.log("delete stylesheet links");
        elms=document.getElementsByTagName('LINK');
        for(i=elms.length-1;i>-1;i--)
        {
            elm=elms[i];

            console.log(elm.href);
            if (elm.rel="stylesheet")
                elm.href="nowhere";
        }
    }
    setTimeout(RestoreClassStyles,2000);
}

function RestoreClassStyles()
{
    console.log("restore class styles",allstyles);

    allelms=document.getElementsByTagName('*');

    for(var i=0;i<allelms.length;i++)
    {
        var elm=allelms[i];
        var id=elm.id;

        var style=getStyleObject(elm);
        for(var key in allstyles[id])
        {
            if (allstyles[id][key]!=style[key])
            {
                console.log(key);
                elm.style[key]=allstyles[id][key];
            }
        }
    }
}

function getStyleObject(dom){
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);

                returns[camel] = val;
            };

            return returns;
        };
        console.log("not found",elm);
        return "";
    }

它“有点效果”，但有些样式不正确，因此我需要帮助才能找到我在该代码中遗漏的内容。工作示例:http://jsfiddle.net/owecfdr2/

Answer 1

我不使用内联样式，而是将 link 元素转换为 style 元素。您可以这样做(我坚持使用 ES5，因为它看起来像您在代码中这样做):

function linkToStyle(link) {
    var css = [];
    var sheet = link.sheet;
    var rules = sheet.cssRules || sheet.rules;
    for (var i = 0; i < rules.length; ++i) {
        var rule = rules[i];
        css.push(rule.cssText);
    }
    var style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(
        document.createTextNode(css.join("\r\n"))
    );
    return style;
}
document.querySelectorAll("link[rel=stylesheet]").forEach(function(link) {
    var style = linkToStyle(link);
    var parent = link.parentNode;
    parent.insertBefore(style, link);
    parent.removeChild(link);
});

通过获取CSS stylesheet object来自 link element , 遍历其 CSS rules ，并使用 cssText每条规则。

作为misorude在 a comment 中指出，链接的 CSS 样式表中的任何 URL 都是相对于样式表的，而不是链接到样式表的页面，因此如果从 URL 的 Angular 来看您的样式表和页面不在同一位置(例如，同一目录)，它会有点更复杂:您必须调整 URL 来解决这个问题。一个简单的版本将只处理 CSSRule.STYLE_RULE 类型的规则(即 CSSStyleRule s)，循环遍历属性以查找和调整 URL。 (如果有进口，它会变得更复杂。)

---

该代码依赖于 querySelectorAll 返回的 NodeList 上的 forEach。大多数浏览器现在都有了； this answer展示了如何检测浏览器是否不存在并填充它。