Jquery将所有引用的页面合并到根页面？答案

【问题标题】：Jquery to merge all referenced pages into root page?Jquery将所有引用的页面合并到根页面？
【发布时间】：2009-11-13 09:45:59
【问题描述】：

这听起来有点晦涩，但是... Jquery（或直接的 javascript）中是否有一种技术可以遍历 HTML 文件中的所有外部 CSS 和 JS 文件引用，并将引用替换为文件的内容。

所以而不是：

<link rel='stylesheet' id='style-css'  href='http://domain.com/style.css' type='text/css' media='all' />    
<script type='text/javascript' src='http://domain.com/js/domain.js'></script>

..它从这些文件中提取所有内容并将其粘贴到呈现的 html 中以制作一个大的 html 文档...？

<head>
...
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
.etc {color:red}
.etc {color:red}
.etc {color:red}
</style>

<script type="text/javascript">
function message()
{
alert("This is an alert");
}
etc
etc
</script>
</head>
<body>
...
</body>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

添加此脚本..

$("script").each(function() { 
    var script = $(this);
    script.load(script.attr("src"));
    script.removeAttr("src");
});
$("link[rel='stylesheet']").each(function() { 
    var link = $(this);
    link.after("<style type='text/css'></style>").next().load(link.attr("href"));
    link.remove();
});

..你可以用..来测试它。

alert($("head").html());

..当一切都完成时。

（而且我认为这样做没有任何理由；）

【讨论】：

【解决方案2】：

我能想象到的唯一有意义的地方是，如果您在服务器上运行 Javascript，使用 Rhino 或类似工具。

您可以按照 Sverre 的建议执行操作，并自己从浏览器加载文件，而不是让浏览器执行此操作，但我看不到任何有用的场景 - 您有相同数量的后台请求并最终结果相同，因此您唯一获得的就是自己的额外工作以及渲染页面的一些额外延迟。还是我误解了你的目标？

另一方面，在服务器上，这很有意义，因为浏览器可以通过在同一个文档中获取所有外部资源来节省大量请求。这是你想要达到的目标吗？

【讨论】：

最后一个最好通过将多个脚本和css文件连接成两个可以缓存的文件来实现。但我认为这不是 OP 所追求的。