Question

我需要制作一个包含大量内容的网页。为了在修改此内容时更高效，我决定将其放在单独的文件中，然后按照本教程包含这些文件：https://www.w3schools.com/howto/howto_html_include.asp。

例如，其中一个文件可能包含一些指向书籍描述的可点击链接，这些链接是模式框。所以我需要在加载脚本中获取它们以获取这些可点击的链接并使它们触发一些事件。但似乎在 JavaScript 获取包含的节点之前调用了这个加载脚本，即使我在读取一些线程后添加了一个事件侦听器（我尝试在 'DOMContentLoaded' 或 'load' 上运行它）：document.getElementById 或 document.getElementsByClassName 仍然返回 null，因此无法定义 onclick 函数。让我展示一个示例代码：

script.js

function includeHTML()  { /* Some code replacing the div by some-content.html, which is : <a id="clickable">Hello</a> */}

var button = null

window.addEventListener('load', function()  {
  button = document.getElementById("clickable");
  button.onclick = function() { alert('Hello'); }
});

index.html

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <p>Here is a trigger button : </p>
  <div include-html="some-content.html"></div>
  
  <script>includeHTML();</script>
</body>
</html>

在 Firefox 上，定义 button.onclick 时会失败，因为 button 仍然为 null。知道如何修复它吗？

我不仅应该添加链接，还应该添加模态框。这是一个脚本代码，更完整，我的猜测是：

script.js

var boxNames = ["bibliography", "about", "book1", "book2" ];
var boxes = null /* Contains the boxes to be displayed */
var trigs = null /* Contains the trigger buttons for each box */
var close = null /* Contains the close buttons for each box */

function setTrigger(i) {
    trigs[i].onclick = function() { setBoxVisible(true, i); }
}

function setClose(i) {
    trigs[i].onclick = function() { setBoxVisible(false, i); }
}

function load() {
    boxes = new Array(4);
    trigs = new Array(4);
    close = new Array(4);
    for(var i = 0; i < boxNames.length; i++) {
        boxes[i]=document.getElementById(boxNames[i]+"-box");
        trigs[i]=document.getElementById(boxNames[i]+"-trig");
        close[i]=document.getElementById(boxNames[i]+"-close");
        setTrigger(i); setClose(i);
    }
}

window.onload = function() { load(); }

includeHTML()的代码可以看我分享的教程，我复制粘贴的。

我认为如果处理这些东西，这种函数会更优雅，但是我需要在加载完所有内容后启动它，就像我手动运行它一样。

Answer 1

您的代码仅在页面加载时添加了事件侦听器，很可能在链接存在之前。

您需要从最近的静态容器委托。

在您的代码中，它是 document

给链接一个类而不是 ID 然后做

window.addEventListener('load', function(e) {
  document.addEventListener('click', function(e) {
    const tgt = e.target;
    if (tgt.classList.contains("clickable")) {
      e.preventDefault(); // because it is a link
      alert('Hello');
    }
  });
});

<a class="clickable" href="#">Click</a>

新代码后更新

您覆盖了触发代码
你可以非常简单地扩展我的代码，这样你就不需要循环

window.addEventListener('load', function(e) {
  document.addEventListener('click', function(e) {
    const tgt = e.target;

    if (tgt.classList.contains("clickable")) {
      e.preventDefault(); // because it is a link
      alert('Hello');
    }
    else if (tgt.classList.contains("box")) {
      e.preventDefault(); // because it is a link
      const [id, what] = tgt.id.split("-")
      console.log(id)
      if (what === "trig") {
        document.getElementById(id).classList.remove("hide")
      }
      else if (what === "close") {
        document.getElementById(id).classList.add("hide"); // or tgt.closest("div").classList.add("hide")
      }  
    }
  });
});

.hide { display:none; }

<a class="clickable" href="#">Click</a>
<hr/>

<a class="box" id="bibliography-trig" href="#">Trigger Biblio</a>
<a class="box" id="about-trig" href="#">Trigger About</a>

<div id="bibliography" class="hide">Biblio
  <a class="box" id="bibliography-close" href="#">Close</a>
</div>

<div id="about" class="hide">About
  <a class="box" id="about-close" href="#">Close</a>
</div>

使用另一个脚本包含的节点加载脚本

1 个答案: