页面源代码中缺少 Javascript 代码答案

【问题标题】：Javascript code is missing from page source code页面源代码中缺少 Javascript 代码
【发布时间】：2014-06-11 10:30:25
【问题描述】：

我有一个 Javascript 代码可以将我的 HTML 页面的一些部分翻译成其他语言。您可以在我在这里提出的另一个问题中阅读有关它的更多详细信息：Multilanguage static website with JQuery

我网站的每个 HTML 页面都有相同的 Javascript 代码。在主页 (www.mywebsite.com) 中有效，但在任何其他较长的路径 (www.mywebsite.com/anotherpage) 中无效。这里奇怪的是页面的源代码中完全没有代码（右键-->查看源代码）

这是部分代码（整个页面很大，我不能全部粘贴）

<html lang="en">
   <head>   
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- Le styles -->
      <link href="./static/css/bootstrap.min.css" rel="stylesheet">
      <link href="./static/css/slider.css" rel="stylesheet">
      <link rel="stylesheet" href="./static/css/font-awesome.css" />
      <link rel="stylesheet" href="./static/css/jquery-ui.css" />

   </head>
   <body>
   ....
   </body>
   <script src="./static/js/jquery.js"></script>
   <script src="./static/js/bootstrap.min.js"></script>
   <script src="./static/js/bootstrap-slider.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>
   <script src="./static/js/jquery.dataTables.min.js"></script>
   ! a few other script codes that works without a problem in this part !

   ! this is the one that is missing from the code
   <script type="text/javascript">

      function getCookie(name) {
         var nameEQ = name + "=";
         var ca = document.cookie.split(';');
         for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
         }
         return null;
      }

      $(function() {

         var language = getCookie("language");
         if (language == null) {
            var language = 'English'
         }
         alert(language)
         $.ajax({
            url: './static/languages/languages.xml',
            success: function(xml) {
               $(xml).find('translation').each(function(){
                  var id = $(this).attr('id');
                  var text = $(this).find(language).text();
                  $("." + id).html(text);
               });
            }
         });
      });

   </script>

我尝试将脚本代码放在页面顶部，但我遇到了同样的问题。我试图将完整的 url 放在 xml 文件中，但没有成功。我在控制台上没有任何错误，脚本也没有在页面源代码上运行。

已解决：

如果我从外部文件加载脚本代码，那么它可以工作。外部文件的代码完全相同，因此不是印刷错误。

【问题讨论】：

www.mywebsite.com/somepath 不是子域！
我使用了错误的术语。我的意思是比主页更长的路径。我会编辑它。我不是说sub.mywebsite.com
检查控制台的网络选项卡。我很确定有一个对www.mywebsite.com/anotherpage/static/languages/languages.xml 的请求失败了。
而不是使用 src="./static/... 在此处使用 www.mywebsite.com/.. 相对路径.../static/...
@Bergi 我也检查过那里，但只有图像和其他脚本。没有关于 xml 文件的内容

标签： javascript jquery html

【解决方案1】：

我觉得你可以使用<base>标签：

<head>
<base href="http://www.mywebsite.com/" target="_self">
</head>

或使用<link href="/static/css/bootstrap.min.css" rel="stylesheet"> 之类的“绝对”路径（开头没有点）。如果开头有一个点，则认为它附加到当前路径（在您的示例中，它给出www.mywebsite.com/anotherpage/static/css/bootstrap.min.css 而不是www.mywebsite.com/static/css/bootstrap.min.css）。同样的规则也适用于 ajax URL。 See.

此外，在您的网络选项卡中没有任何对 xml 文件的 ajax 请求与...缺少<script>（显然...）密切相关。但很难说为什么缺少该脚本，因为您没有提供有关如何生成 html 代码的信息（它是静态 html 文件或模板？您使用任何框架吗？）。

【讨论】：

【解决方案2】：

您应该尝试将您的函数提取到外部文件中，并像其他文件一样引用它：

<script src="../static/js/bootstrap-slider.js" type='text/javascript'></script>

另外，在 html 页面上包含 js 代码也不是好的做法，您的代码可以在删除 html 元素时被删除等。

【讨论】：

问题出在另一个脚本上（有两个函数）。不在初始脚本中。
然后你可以把函数放在一个外部文件中，就像其他的一样。无论如何，在 html 页面上都有 js 代码并不是一个好习惯
我不知道原因，但作为一个外部文件，它突然起作用了 :) 如果您使用新的详细信息和示例编辑您的答案，我可以选择它作为最佳答案。但我不能以目前的形式做到这一点。