使用 jquery 注入 HTML 和 CSS，但将 CSS 放在单独的文件中？

Question

我正在构建一些东西，它将通过托管在我的服务器上的 Jquery 将 HTML 注入用户网站（他们只是像他们已经做其他 Javascript 一样包含我的脚本）。

所以我进行了 HTML 注入；我怎样才能不使用注入的 HTML 编写内联样式 CSS？

我唯一的想法是在我的 Jquery 开头查询我的服务器以获取此外部 javascript 文件。我不确定如何使 CSS 和 Jquery 对用户的浏览器可用。

有什么想法吗？我正在做类似下面的事情，仅供参考。

$(document).ready(function() {
$('body').find(":last").after("
<div class='spacer'></div><div id='nav_menu_wrapper'><div class='nav_menu'>");
});

Answer 1

您可以使用 jQuery 注入 标记，其中 href 指向您提供脚本的位置：

$('head').append(
    $('<link/>', {href: '//path.to/your/stylesheet.css', rel: 'stylesheet'})
);

Answer 2

您可以在 head 上附加 CSS。

$("<link />").attr({ "href": "link",
    "rel": "stylesheet",
    "type": "text/css" })
    .appendTo("head");

或者发出请求并创建 style 标记。

$.get("/static/default.css", function(d)
{
    $("<style />").html(d).appendTo("head");
})

至于附加 html，您可以制作 $.get 并附加或使用 iframe。