如何将父页面Cookie传入iFrame src实现UTM参数透传？

现有代码问题 #

• 原getCookie函数存在变量名不匹配bug：形参与内部引用的变量名不一致，无法正确读取Cookie值
• 原iFrame参数拼接逻辑直接取当前页面的URL参数，没有读取Cookie中存储的用户首次访问落地页的UTM参数，用户跳转其他页面后参数就会丢失
• iFrame内部原有代码存在重复赋值问题：同一个隐藏字段被先后写入utm_source和utm_term，先写入的值会被覆盖
• iFrame内部原有代码尝试跨上下文读取父页面Cookie，跨域场景下会直接被浏览器安全策略拦截，无法生效

父页面修复代码（直接替换原有逻辑即可） #

父页面逻辑负责读取存储了首次落地页地址的Cookie，提取其中的UTM参数拼接在iFrame的src地址后，不需要做额外跨域通信：

// 通用Cookie读取方法
const getCookie = (cookieName) => {
  const matchReg = new RegExp(`(?:^|; )${cookieName}=([^;]*)`);
  const matchRes = document.cookie.match(matchReg);
  return matchRes ? decodeURIComponent(matchRes[1]) : '';
}

// 读取存储首次落地页URL的Cookie
const storedCampaignUrl = getCookie('__gtm_campaign_url');
let utmSearchStr = '';

if (storedCampaignUrl) {
  try {
    // 提取Cookie存储URL中的查询参数
    const urlObj = new URL(storedCampaignUrl);
    utmSearchStr = urlObj.search;
  } catch (err) {
    // 格式异常时兜底使用当前页面参数
    utmSearchStr = window.location.search;
  }
} else {
  // 无对应Cookie时兜底使用当前页面参数
  utmSearchStr = window.location.search;
}

// 动态生成iFrame
const formBaseAddr = 'https://go.mysite.com/some-unique-ids';
const currentScriptDom = document.scripts[document.scripts.length - 1];
const formIframe = document.createElement('iframe');

formIframe.src = formBaseAddr + utmSearchStr;
formIframe.width = '100%';
formIframe.height = 500;
formIframe.frameBorder = 0;
formIframe.allowTransparency = 'true';
formIframe.style.border = '0';

currentScriptDom.parentElement.replaceChild(formIframe, currentScriptDom);

iFrame内部简化代码（替换原有无效的Cookie读取逻辑） #

因为UTM参数已经直接拼接在iFrame自身的src地址上，不需要跨域读父页面资源，直接解析自身URL参数写入隐藏字段即可：

// 读取当前iFrame URL中的参数
const getUrlParam = (paramName) => {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(paramName) || '';
}

// 写入对应隐藏字段，注意核对每个字段的ID，不要重复给同一个input赋值
document.querySelector("input#input_3_9").value = getUrlParam('utm_source');  
// 注意：原代码此处和上一行用了同一个input ID，会覆盖utm_source的值，请替换为utm_term对应的正确input ID
// document.querySelector("input#替换为utm_term对应的字段ID").value = getUrlParam('utm_term');  
document.querySelector("input#836443_81170pi_836443_81170").value = getUrlParam('utm_medium');
document.querySelector("input#input_3_8").value = getUrlParam('utm_campaign');   
document.querySelector("input#input_3_11").value = getUrlParam('utm_content');

注意事项 #

• 父页面写入__gtm_campaign_urlCookie时，将path属性设置为/，保证全站所有页面都能读取到该Cookie，避免仅在落地页路径下生效导致其他页面读值为空
• 该方案兼容跨域场景，不需要调整域名配置、不需要做postMessage通信，稳定性最高
• 上线前务必核对每个UTM参数对应隐藏字段的ID，避免ID写错或者重复赋值导致参数丢失

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