为何document.innerHTML函数无法生效？登录按钮点击无响应问题咨询

你的代码存在两个核心问题导致嵌入功能失效：

1. 错误的DOM操作对象
   document.innerHTML是无效写法，document对象本身没有innerHTML属性，你需要操作document.body或页面内具体容器元素的innerHTML。

2. HTML字符串未正确包裹
   赋值给innerHTML的HTML代码没有用引号（单/双引号均可）包裹，这会直接引发语法错误，导致浏览器无法解析这段代码。

修复后的代码 #

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

  if (password === "password") {
    alert("Correct!");
    // 修正为操作body的innerHTML，并正确包裹HTML字符串
    document.body.innerHTML = '<embed src="http://stackoverflow.com" style="width:500px; height: 700px;"></embed>';
  } else {
    loginMessage.textContent = "Invalid password.";
  }
});

额外说明 #

即便修复了语法问题，你大概率还是无法成功嵌入Stack Overflow页面。包括Stack Overflow在内的多数主流网站都设置了X-Frame-Options或Content-Security-Policy响应头，禁止自身页面被嵌入到其他站点的iframe/embed中，这是浏览器的安全防护机制，用于防范点击劫持类攻击。

内容的提问来源于stack exchange，提问作者Ryan Cheung