Question

在我的index.html中，我有许多脚本和css文件，我有版本控制后缀，如下所示：

<html>
  <head>

    <link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=3.0">

  </head>
  <body>

    <script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>
    <script type="text/javascript" src="/framework/compile/js/app.min.js?version=3.0"></script>

  </body>
</html>

我还有一个html视图目录和较小的html文件。每当我更新其中一个文件时，我都会增加次要版本号。例如，更新后/framework/compile/css/main.min.css?version=3.0变为/framework/compile/css/main.min.css?version=3.1。

但是，如果我进行主要网站更新并更改大多数文件，我会将版本号推送到4.0。我不想手动更改每个文件的版本号。使用javascript变量或类似的东西，是否有一种简单易读的方法。

我正在寻找类似的东西：

    <script>var version = "3.0";</script>
    <link rel="stylesheet" type="text/css" href="/framework/compile/css/main.min.css?version=" + version>

  </head>
  <body>

    <script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>
    <script type="text/javascript" src="/framework/compile/js/app.min.js?version=" + version></script>

  </body>
</html>

以上显然是不正确的语法，不起作用。

Answer 1

这是一个快速的解决方案，使用一些Jquery：

<html>
  <head>
    
  </head>
  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <!--Your css and js will be referred inside this div -->
    <div id="updatable_source"></div>
    
    <!--Version updater script-->  
    <script>
      var version = '3.0'
      $('#updatable_source').html(
        '<link rel="stylesheet" type="text/css"'
          +'href="/framework/compile/css/main.min.css?version='+version+'"/>'
        +'<script type="text/javascript" src="/framework/compile/js/app.min.js'
          +'version='+version+'"/>'
        +'<script type="text/javascript" src="/framework/compile/js/app.min.js version='+version+'"/>'
      );
    </script>  
    
  </body>
</html>

只需更改“版本”var即可更新版本

Answer 2

使用纯Javascript的解决方案

的index.html

<html>
  <head>

  </head>
  <body>

    <div>
      Your main content should come BEFORE your javascript. 
      The script to include the files should be immediately after your content, 
      but before any other script file includes or in page javascript.
    </div>

    <script>

      /*******************************************************
      / Alternate Solution: If you're only wanting to get the
      / most current version of each file, you can just append
      / a datetime stamp to the script tag's url src
      /*******************************************************/

      //get current datetime in milliseconds
      var version = new Date().valueOf();

      /*******************************************************
      / OR you can use manual version numbers as per your ?
      /*******************************************************/

      //variable to hold version number
      var version = "3.0";

      /*******************************************************
      / Add the following ahead of any other scripts before
      / the closing body tag
      /*******************************************************/

      var cssLnk = document.createElement("link");
      cssLnk.setAttribute("rel", "stylesheet");
      cssLnk.setAttribute("type", "text/css");
      cssLnk.setAttribute("href", "/framework/compile/css/main.min.css?version=" + version);

      document.head.appendChild(cssLnk);

      var scr_A = document.createElement("script");
      scr_A.setAttribute("type", "text/javascript");
      scr_A.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);

      document.body.appendChild(scr_A);

      var scr_B = document.createElement("script");
      scr_B.setAttribute("type", "text/javascript");
      scr_B.setAttribute("src", "/framework/compile/js/app.min.js?version=" + version);

      document.body.appendChild(scr_B);

    </script>

  </body>
</html>

所有文件的版本控制后缀

2 个答案: