时间戳

首页 > 解决方案 > 为什么这个脚本只能在主 HTML 文件中工作？

javascript - 为什么这个脚本只能在主 HTML 文件中工作？

问题描述

我有一个 JS 菜单生成器，它仅在包含在主 html文件中时才有效，并且在外部文件中无效。我尝试了几个作者的 JS 自动菜单变体，它们都表现出相同的行为。

我已经尝试了之前适用答案中的所有建议，例如将脚本文件请求放在其他位置，例如“div id = submenu”之前或html文件的末尾。外部文件位于同一目录中并且是正确的名称。我仔细检查了愚蠢的错误。没运气！

更新

在尝试了未知的事物组合后，我让脚本正常工作，但我不知道是什么导致了问题，也不知道我到底做了什么来解决这个问题。问题似乎不止一个。

有一段时间，脚本在不包含 .. 的情况下还有其他问题，然后我注意到它已经改变，当我删除 .. 时，我得到了完整的功能。

我希望我可以将其传递给其他人，我几乎怀疑我所做的互联网剪切和粘贴的隐藏角色。但是，我在其他作者的类似功能上遇到了同样的问题，而且我以前从未遇到过剪切和粘贴问题。（没想到要开启Notepad++的隐藏字符功能。）感谢帮助！

有几个关于 js 不能从外部文件工作的问题...
JS 时钟不工作
为什么这个脚本不能在外部 js 文件中工作？
javascript 在外部文件中不起作用
，这些似乎都不能解决我遇到的问题。

这似乎是我理解的 JS 的一个重要部分，我对 JS 不是很熟悉，所以请不要回答:)

主 HTML 文件

<!DOCTYPE HTML>
<head>
  <title>Title</title>
</head>
<body style="margin: 50px auto; width:1000px;"> 
  <div id="submenu">building menu...</div>
  <h1>This is H1</h1>
  <h2>This is H2 one</h2>
  <h2>This is H2 two</h2>
  <h3>This is H3</h3>
  <h4>This is H4</h4>
  <!-- script include moved as suggested -->
  <script type="text/javascript" src="main.js"></script> 
</body>
</html>

外部“main.js 脚本文件”

// script tags removed <script type="text/javascript">

  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

  var buildMenu = function(targetId, headingTag) {
    var target = document.getElementById(targetId);
    var headings = document.getElementsByTagName(headingTag || "h2");

    if(headings.length > 1) {
      // construct an ordered list of links
      var menuList = document.createElement("OL");
      for(var i=0; i < headings.length; i++) {
        var anchorName = "";
        if(headings[i].id) {
          anchorName = headings[i].id;
        } else {
          anchorName = "section_" + i;
          headings[i].setAttribute("id", anchorName);
        }

        var headingText = headings[i].firstChild.nodeValue

        headings[i].firstChild.nodeValue = (i+1) + ". " + headingText;

        var menuLink = document.createElement("A");
        menuLink.setAttribute("href", "#" + anchorName);
        menuLink.appendChild(document.createTextNode(headingText));

        var listItem = document.createElement("LI");
        listItem.appendChild(menuLink);

        menuList.appendChild(listItem);
      }

      // remove all nodes from inside target element
      while(target.hasChildNodes()) target.removeChild(target.firstChild);

      // insert our generated menu into the target element
      target.appendChild(menuList);
    } else {
      // remove the target element from the DOM
      target.parentNode.removeChild(target);
    }
  };

  if(document.addEventListener) {
    document.addEventListener("DOMContentLoaded", function() {
      buildMenu("submenu", "h2");
    }, false);
  } else {
    window.attachEvent("onload", function() {
      buildMenu("submenu", "h2");
    });
  }

// removed </script>

标签： javascript

解决方案

推荐阅读