为什么这个 document.innerHTML 函数不起作用？

Question

我不知道为什么如果你触发该功能，什么也没有发生

loginButton.addEventListener("click", function() {
  const password = document.getElementById("password").value;

  if (password === "password") {
    alert("Correct!");
    document.innerHTML = <embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>;
  } else {
    loginMessage.textContent = "Invalid password.";
  }
});

我期待嵌入一个网站

Answer 1

您的代码不起作用至少有四个不同的原因。

document不支持innerHTML

innerHTML是 HTML 元素上的一个属性。该document对象不是 HTML 元素。

考虑document.body.innerHTML一下。

innerHTML需要一个字符串

正如Mina所指出的，<embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>这是 JavaScript 中的一个语法错误。

您应该会在浏览器开发人员工具的控制台中看到报告的此错误。

您需要将一个字符串分配给innerHTML. 将代码包装在'（或"转义"数据中）。

= '<embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>';

<embed>不适用于 HTML 文档

另请注意，根据 MDN：

请记住，大多数现代浏览器已经弃用并删除了对浏览器插件的支持，因此<embed>如果您希望您的网站可以在普通用户的浏览器上运行，那么依赖通常是不明智的。

考虑<iframe>一下。

Stackoverflow 禁止这样做

Stackoverflow 有一个CSP，禁止其他站点嵌入它。