在Google Sites嵌入代码中添加内部页面超链接的问题

核心原因 #

Google Sites的「Full Page Embed」会将你的HTML页面嵌入到跨域iframe中，并且自动重写页面内的相对链接到googleusercontent.com的无效路径；同时直接跳转Google Sites原生页面时，由于iframe域名与目标页面域名不一致，浏览器的同源策略会拦截target="_self"的跳转请求。

可行解决方案 #

方法1：JavaScript修改跳转逻辑（推荐）

在index.html中添加以下脚本，监听链接点击事件，直接修改顶层窗口地址，绕过iframe的链接重写和跨域拦截：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const dataLink = document.querySelector('a[href*="data.html"]');
  if (dataLink) {
    dataLink.addEventListener('click', function(e) {
      e.preventDefault();
      // 替换<你的站点路径>为实际Google Sites路径
      window.top.location.href = 'https://sites.google.com/view/<你的站点路径>/data-html';
    });
  }
});
</script>

• 该方法通过直接操作顶层窗口的location，绕过iframe限制，实现同标签页跳转。

方法2：批量处理多内部链接

如果有多个内部页面需要跳转，可使用批量处理脚本：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const internalLinks = document.querySelectorAll('a[data-internal]');
  internalLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const targetPath = this.getAttribute('data-target');
      // 替换<你的站点路径>为实际Google Sites路径
      window.top.location.href = `https://sites.google.com/view/<你的站点路径>/${targetPath}`;
    });
  });
});
</script>

对应的链接写法修改为：

<a href="#" data-internal data-target="data-html">Data</a>
<a href="#" data-internal data-target="test-html">Test</a>

注意事项 #

• 必须使用Google Sites原生页面地址，不要用相对链接
• 操作window.top.location是合法绕过跨域拦截的方式，不会触发浏览器安全限制
• 需在Google Sites的公开预览或发布状态下测试，本地预览可能不生效

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