Question

这听起来有点模糊，但...... 是否有一种技术在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>

Answer 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());

..什么时候完成。

（我认为没有任何理由这样做;）

Answer 2

我能想象到的唯一有意义的地方就是你在服务器上运行Javascript，使用Rhino或类似的东西。

你可以像Sverre建议的那样自己从浏览器加载文件，而不是让浏览器这样做，但我看不到任何有用的场景 - 你有相同数量的后台请求并最终结果相同，所以你唯一获得的就是为自己做额外的工作，并且在渲染页面时可能会有一些额外的延迟。或者我是否误解了你的目标？

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

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

2 个答案: