2

我为导航菜单创建了一个 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 应用于插件的计算时。

我该如何解决这个问题？

4

2 回答 2

5

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

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

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

<style>通过将 CSS 加载到 JavaScript 字符串中，然后动态构建元素，确保在任何 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 解释方式的差异。祝你好运！:)

于 2012-05-19T03:48:01.100 回答
1

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

查询

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();
});
于 2012-05-19T03:45:32.863 回答