Question

我试图找到在我的html中调用js和css的最佳解决方案。按照标准我在<head></head>和<body>底部调用它们...但我的网页上有很多页面，而且我不想在所有HTML中逐个添加或删除新页面脚本。
我不想在一个缩小的文件中连接所有脚本。我的想法是将所有<script>放在单独的HTML文件中，并在每个HTML中包含此HTML。而且，下次当我更改某些脚本时，我只需要更改此分隔文件，而不是逐个更改。这是一个例子

allCss.html

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/main.css" rel="stylesheet">

<!-- Animation-->  
<link rel="stylesheet" href="css/animate.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

allScripts.html

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
<script>
    jQuery(document).ready(
        $("#loadStyle").load("allCss.html"),
        $("#loadScript").load("allScripts.html"));
</script>

在index.html，pageA.html，pageB.html等中我只将其添加到正文的头部和底部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-
to-fit=no">
<meta name="author" content="">
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>#</title>

<!-- style-->
<div id="loadStyle"></div>

</head>
<body>

<!-- style-->
<div id="loadScript"></div>

</body>
</html>

这不起作用，有什么解决办法吗？

P.S：我希望你能理解

Answer 1

<script>
jQuery(document).ready(function(){
    $("#loadStyle").load("allCss.html"),
    $("#loadScript").load("allScripts.html")
});
</script>

我想你忘记了.ready（function（）{}）;我刚才包含在上面代码中的部分

<强>附加

你不能在头部添加div，脚本，标题，元，样式和noscript标签是常用的标签，你可以做的最好的是使用脚本文件而不是html文件来添加例如，那些其他脚本编写一个JavaScript代码来编写文件中的其他脚本和样式，例如让我们说loader.js包含每个文件的loader.js，所以只要你想添加一个新脚本，只需打开loader.js文件并且包含新脚本，有几个库可以轻松实现。这是一个图书馆https://github.com/dolox/fallback

Answer 2

你可以使用数组做一些更精细的事情

var div = document.getElementById('scripts');
var script = $('<script>').attr('src', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js');
$(div).append(script);

clicked = function(){
  //bootstrap function wich was not imported from html
  $('#myModal').modal('show')
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="scripts"></div>
<button onclick="clicked()">click me</button>


<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" id="myModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Answer 3

你可以用JavaScript做到这一点。通过ajax加载html文件。在这种情况下，您最初只需要在每个页面上使用一个脚本。

https://www.w3schools.com/howto/howto_html_include.asp

代码本身如下所示：

w3.includeHTML = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

从分离的文件加载所有脚本标记并包含到html

3 个答案: