javascript - 动态加载 CSS - jQuery 与纯 Javascript

Question

我正在用 java 脚本代码加载 CSS 文件。起初我使用 jQuery 代码。它运行良好，但过了一段时间我意识到 CSS 规则不适用于 IE 浏览器。所以我用谷歌搜索并将其替换为 document.createElement 版本。现在它可以在所有浏览器中顺利运行。有人知道为什么吗？这两种方法有区别吗？

var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = filename;
cssNode.media = 'screen';
cssNode.title = 'dynamicLoadedSheet';
document.getElementsByTagName("head")[0].appendChild(cssNode);

对比

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
$fileref.attr("media", "screen");
$fileref.attr("title", 'dynamicLoadedSheet');
$('head').append($fileref);

谢谢，帕维尔

附言另一个提示:

$('head').append($fileref);

document.getElementsByTagName("head")[0].appendChild($fileref[0]);

使用第一种 $ 方法加载文件失败，而使用 document.getElement... 有效。所以，这样的事情是可行的:

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

有效。

------------------------ 提示 2 另一个踢球者:

这个有效:

var $fileref = $("<link />");
$fileref.attr("rel", "stylesheet");
$fileref.attr("type", "text/css");
$fileref.attr("href", filename);
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

这个没有:

var $fileref = $('<link rel="stylesheet" type="text/css" href="' + filename + '" />')
document.getElementsByTagName("head")[0].appendChild($fileref[0]);

Answer 1

jQuery 和其他东西(如 createDocumentFragment)严重依赖 innerHTML 来创建/操作元素，因为它是动态创建/修改页面的最快方式内容。

虽然大多数浏览器都支持 innerHTML，但它不是 W3C 标准的一部分，尽管它在浏览器中的工作相当一致，但它确实带有一些怪癖。

例如，它允许插入无效的 HTML，从而引入难以捕获的错误；删除元素时，它可能会导致与被删除的 DOM 元素关联的事件和数据发生内存泄漏；当使用 innerHTML 创建元素时，尤其是在页面加载时，事件处理程序尚未绑定(bind)到元素，这就是我认为这里发生的情况，因为 link 是一个 < em>special 标签，在事件方面，因为一旦 link 标签被添加到 DOM 中，页面就需要开始下载样式表，并且一旦加载就需要更新自身完成，并且由于没有事件处理程序告诉它，页面不执行任何操作。

因此，尽管 innerHTML 在大多数浏览器中都能完美运行，但它不是 W3C 标准的一部分，最好使用标准 DOM 方法添加这些 special 标签 ( createElement, appendChild 等)

我不是 IE 用户，我无法列出所有使用 innerHTML 创建时有问题的元素，但我知道我在 IE8 中使用 google 的 excanvas 时遇到了问题。 js 无法将自身附加到动态创建的 canvas 元素，我需要重新创建所有使用 jQuery 创建的 canvas 元素(因此innerHTML) 并使用标准 DOM createElement 方法重新创建它们。

这很有趣，因为 Internet Explorer 是第一个拥有 innerHTML 的浏览器(因为 Microsoft 发明了这个属性)，而且它也是没有正确实现它的浏览器。