嵌入登录注册页后点击提交跳转至About页的实现问题

看起来你遇到的核心问题是嵌入在embed里的登录表单，点击提交按钮后无法触发跳转逻辑，这主要是因为embed相当于一个独立的浏览器上下文，首页的jQuery没法直接绑定里面的DOM事件，而且之前的代码也没处理表单提交的默认行为。我给你两个可行的解决方案，推荐第一个，更简单可靠：

方案一：直接在登录页（login.html）中处理提交逻辑 #

既然登录表单是独立的页面，直接在它自己的脚本里绑定提交事件是最稳妥的，不会有跨上下文的问题。修改你的login.html代码如下：

<body>
<form class="login" name="Log">
  <input type="email" name="email" placeholder="enter email" required>
  <input type="password" name="password" placeholder="enter password" required>
  <!-- 给按钮加上type="submit"，确保它能触发表单的submit事件 -->
  <button type="submit">Submit</button>
</form>

<script>
// 监听表单的提交事件
document.querySelector('form[name="Log"]').addEventListener('submit', function(e) {
  // 先阻止表单默认的提交行为（不然页面会刷新或者跳转默认的action地址）
  e.preventDefault();

  // 这里可以添加你的登录验证逻辑，比如：
  // 1. 获取输入的邮箱和密码
  // const email = this.email.value;
  // const password = this.password.value;
  // 2. 发送AJAX请求到后端验证账号
  // 如果验证通过，再执行跳转

  // 跳转到独立的About页面，用window.top确保是整个浏览器窗口跳转，而不是在embed里打开
  window.top.location.href = 'about.html';
});
</script>
</body>

为什么这个方案更好？ #

• embed里的页面拥有自己的DOM和全局上下文，首页的jQuery无法直接访问它内部的元素，所以在登录页自己的脚本里处理最直接。
• window.top会确保跳转的是顶级浏览器窗口，而不是在embed框架内打开About页面，完全符合你的需求。

方案二：在首页中监听embed加载并绑定事件（仅限同域场景） #

如果你的登录页和首页是同域名的（比如都在localhost或者同一个服务器下），也可以在首页中等待embed加载完成后，再绑定事件。修改首页的脚本部分：

<script type="text/javascript">
$('button.login').on('click',function(){
  $('embed.login').removeClass('hidden');
  $('embed.signup').addClass('hidden');

  // 等待登录embed加载完成后再绑定事件，用one避免重复绑定
  $('embed.login').one('load', function() {
    // 获取embed内部的文档对象
    const embedDocument = this.contentDocument || this.contentWindow.document;
    // 绑定表单提交事件
    $(embedDocument).find('form[name="Log"]').on('submit', function(e) {
      e.preventDefault();
      // 跳转到About页面
      window.location.href = 'about.html';
    });
  });
});

$('button.sign').on('click',function(){
  $('embed.signup').removeClass('hidden');
  $('embed.login').addClass('hidden');
});
</script>

注意事项 #

• 这个方案必须保证登录页和首页同域，否则浏览器的跨域安全策略会阻止你访问embed内部的文档，导致代码失效。
• 用.one('load')而不是.on('load')，避免每次点击登录按钮都重复绑定事件。

最后再提醒你几个细节：

• 确保表单按钮的type是submit，默认如果不写的话，有些浏览器会把按钮当成type="button"，这样不会触发表单的submit事件。
• 如果需要后端验证登录状态，记得在跳转前先完成AJAX请求，验证成功后再执行window.top.location.href跳转。

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