如何在新版Google Sites中通过HTML获取原始访问URL？

这确实是新版Google Sites的一个常见坑——因为自定义HTML内容是运行在Google托管的iframe里的，所以直接用window.location.href或者document.URL拿到的肯定是iframe自身的URL，而非你实际访问的sites.google.com域名下的原始地址。下面给你几个可行的解决方案：

方法1：尝试访问顶层窗口的Location（注意跨域限制） #

如果你的自定义HTML是通过Google Sites的「嵌入」功能直接添加的，可以尝试用window.top.location.href获取最顶层窗口的URL，也就是你的原始站点地址。不过要留意：

• 由于Google Sites的iframe域名是googleusercontent.com，而顶层站点是sites.google.com，属于不同二级域名，浏览器的同源策略可能会阻止你直接访问window.top.location，这时候会抛出跨域错误。
• 这种方法只在部分特殊场景下有效（比如Google内部放宽了部分同源限制），稳定性不高。

代码示例：

try {
  const originalUrl = window.top.location.href;
  console.log("原始站点URL:", originalUrl);
} catch (error) {
  console.error("无法访问顶层窗口URL（跨域限制）:", error);
}

方法2：通过Google Apps Script获取（稳定可靠） #

这是最推荐的方法，利用Google官方API获取站点信息，完全没有跨域问题：

1. 创建Google Apps Script项目：
   • 打开Google Apps Script平台，新建一个项目。
   • 替换默认代码为：

     function getSiteUrl() {
       // 获取当前活跃的Google站点
       const activeSite = SitesApp.getActiveSite();
       // 返回站点的原始URL
       return activeSite.getUrl();
     }
     
     // 用于部署为Web App的函数
     function doGet() {
       return HtmlService.createHtmlOutputFromFile('Index');
     }
     

2. 创建HTML文件：
   • 在脚本编辑器中，点击「文件」→「新建」→「HTML文件」，命名为Index。
   • 在HTML文件中添加自定义内容，并调用上面的函数获取URL：

     <!DOCTYPE html>
     <html>
       <body>
         <script>
           // 调用Apps Script函数获取站点URL
           google.script.run.withSuccessHandler(function(siteUrl) {
             console.log("原始站点URL:", siteUrl);
             // 在这里使用获取到的URL做后续操作
             document.getElementById('site-url').textContent = siteUrl;
           }).getSiteUrl();
         </script>
         <p>原始站点URL：<span id="site-url"></span></p>
       </body>
     </html>
     

3. 部署为Web App：
   • 点击「部署」→「新部署」，选择「类型」为「Web应用」。
   • 根据你的站点访问权限，设置权限为「任何人，甚至匿名用户」或对应范围，然后点击「部署」。
   • 复制生成的Web App URL，回到你的Google Sites站点，添加「嵌入」组件并粘贴这个URL即可。

这样部署后，你的HTML就能稳定获取到站点的原始URL了。

方法3：手动传递URL参数（简单但不灵活） #

如果你的站点URL固定不变，不需要动态获取，可以在嵌入HTML时手动把原始URL作为查询参数传递：

比如，你的自定义HTML页面地址是https://your-host.com/your-html.html，那么在Google Sites嵌入时，把地址改成：

https://your-host.com/your-html.html?originalUrl=https://sites.google.com/view/your-site-name/home

然后在你的HTML中通过以下代码获取：

const urlParams = new URLSearchParams(window.location.search);
const originalUrl = urlParams.get('originalUrl');
console.log("原始站点URL:", originalUrl);

这个方法操作简单，但如果站点URL有变动，你需要手动更新嵌入地址，适合小型固定站点。

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