如何获取iframe宿主页面的URL参数？（GAS代码场景）

核心原因 #

原代码中的doGet函数运行在GAS服务器端，只能获取GAS自身请求的URL参数，无法直接访问客户端iframe宿主页面的信息——服务器端代码与客户端宿主页面属于完全隔离的执行环境。

解决方案：前端+后端配合 #

通过前端JavaScript获取宿主页面的URL参数，再根据需求传递给GAS后端处理。

步骤1：修改GAS的doGet函数 #

移除原本的参数解析逻辑，直接返回HTML模板：

function doGet(e) {
  var html = HtmlService.createTemplateFromFile('Recruit_Create');
  return html.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

步骤2：在HTML模板中添加前端逻辑 #

在你的Recruit_Create.html文件中，加入以下代码用于获取并处理宿主页面的URL参数：

<script>
// 解析宿主页面URL参数
function parseHostParams() {
  // 获取宿主页面的完整URL
  const hostUrl = window.parent.location.href;
  // 解析URL中的参数集合
  const urlParams = new URL(hostUrl).searchParams;

  // 提取目标参数（保持与原逻辑一致的默认值）
  const page = urlParams.get('page') || 'Recruit_Create';
  const gsid = urlParams.get('gsid') || 'null';
  const sheet = urlParams.get('sheet') || 'null';

  // 示例：若需将参数传给GAS后端处理
  google.script.run.withSuccessHandler((response) => {
    console.log('后端处理结果：', response);
  }).handleHostParams(page, gsid, sheet);
}

// 页面加载完成后执行参数解析
window.addEventListener('load', parseHostParams);
</script>

步骤3：添加GAS后端处理函数（可选） #

如果需要在服务器端处理宿主页面的参数，新增以下后端函数：

function handleHostParams(page, gsid, sheet) {
  // 此处可添加业务逻辑，例如操作Google表格
  console.log('收到宿主页面参数：', { page, gsid, sheet });
  return '参数已成功接收并处理';
}

注意事项：跨域限制 #

• 仅当宿主网站与GAS页面协议一致（均为HTTPS），且宿主网站未设置严格的跨域隔离策略时，window.parent.location才能正常访问。
• 若遇到跨域访问失败的情况，可要求宿主网站在嵌入iframe时，将自身的URL参数拼接到GAS的iframe地址中，示例：

  <iframe src="https://script.google.com/.../exec?page=xxx&gsid=xxx&sheet=xxx"></iframe>
  

  这种情况下，你原本的doGet函数可直接获取到这些参数。

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