Question

我为导航菜单创建了一个jQuery插件。在JavaScript中，在jQuery插件JavaScript文件中（位于文件顶部）我动态加载与插件相关的CSS。然后在$(document).ready(function()我将插件附加到HTML元素DIV。

问题是当插件启动时，它会根据应用于元素的CSS计算一些outerWidth（）。在某些浏览器中，插件在CSS完全加载并应用于HTML之前执行。发生这种情况时，宽度计算不正确。通常，它是获取窗口的宽度而不是从li或ul元素获取它。

我在插件JavaScript文件中有如下代码：

function includeCSS(p_file) {
    var v_css = document.createElement('link');
    v_css.rel = 'stylesheet'
    v_css.type = 'text/css';
    v_css.href = p_file;        
    document.getElementsByTagName('head')[0].appendChild(v_css);
}

includeCSS("Scripts/jQuery/plugins/jquery-mmm-1.0/menu.css");

我已经尝试在jQuery init方法中加载css但是这也有类似的问题。

我需要在jQuery插件JavaScript文件中指定CSS（以便为最终用户提供便利）。

在完成此操作时，我直接链接到HTML页面中的CSS。在这样做的时候，事情很有效。问题肯定是当我动态加载CSS并随后需要将这个CSS应用于插件的计算时。

我该如何解决这个问题？

Answer 1

大多数插件都向开发人员提供了在head部分中包含CSS和JavaScript的说明。大多数熟悉jQuery的Web开发人员都习惯于这种约定。它不仅运行良好，而且在野外应该预期的其他JavaScript，CSS和HTML验证问题之间的冲突也较少。虽然有经验的专业开发人员可能会花时间来验证他们的代码并以深思熟虑的方式构建他们的网站，但整个互联网社区是多种多样的，而且许多人并不总是遵守这些原则。

话虽如此，您可以使用AJAX请求将CSS下载为text / plain内容，然后在成功处理程序中，将CSS添加到<style>块，然后调用宽度计算函数：< / p>

使用AJAX检索CSS的解决方案：

通过将CSS加载到JavaScript字符串中然后动态构建<style>元素，确保在任何JavaScript运行之前加载CSS。

$.ajax({ "url" : "/css/yourstyle.css",
    success: function(data) {
        // assume data is "body { background-color:yellow; }";
        $('head').append('<style id="testtest"></style>');
        $('head').find("#testtest").html( cssString );

        // now fire your width-calculating function here
    }
});

此方法的一个问题可能包括由于操作顺序而无法正确呈现的样式。通常，内联样式的优先级高于样式块，样式块的优先级高于外部样式表。由于您的CSS现在作为样式块而不是外部样式表加载，因此它可能会覆盖或以其他方式使您不打算覆盖的样式无效。

这可能会迫使用户修改CSS以包含更具体的CSS规则或在CSS规则中使用！important标识符。

此外，确保开发人员可以轻松地重新配置CSS文件的位置。您的路径是相对的，如果我在不同的文件夹中有HTML文件，他们可能无法找到您的CSS文件。

总之，这种方法可以很好地工作，但是您应该准备好将更多的时间和维护放在这样的解决方案中，并处理CSS解释方式的差异。祝好运！：）

Answer 2

解决该问题的一种方法是使用.get()加载CSS，并在该操作完成后调用剩余的代码！

<强> JQUERY

var css = "foobar.css";
var callback = function() {
  alert("CSS is now included");
  // your jquery plugin for a navigation menu
};

$.get(css, function(data){
  $("<style type=\"text/css\">" + data + "</style>").appendTo(document.head);
  callback();
});

从jQuery插件动态加载的CSS - 必须加载CSS，因为它是函数所必需的

2 个答案: