JS动态设置iframe URL后无法加载Website A Cookie的问题求助

需求目标 #

我想通过1×1像素的iframe在后台加载Website A的Cookie，之后将用户重定向至Website B。

问题描述 #

执行下方代码后，用户会被重定向到Website B，但浏览器中未出现Website A的Cookie，说明该站点未在后台加载。如何解决？

<html>
  <META name="description" HTTP-EQUIV="Refresh" CONTENT="">
  <iframe id="MyFrame" style="width: 1px; height: 1px;"></iframe>
</html>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    var tidParameter = urlParams.get("tid");
    var offerParameter = urlParams.get("offer");
    console.log (offerParameter);

    if (offerParameter == "bb") {
      var address = "www.websiteA.com/?tid=";
      var combined = address + tidParameter;
      var iframeSrcValue = document.getElementById("MyFrame").src;
      document.getElementById('MyFrame').setAttribute("src", combined);
      document.querySelector('meta[name="description"]').setAttribute("content", "5;url=www.websiteB.com");
    }
    else if (offerParameter == "bd") {
      document.querySelector('meta[name="description"]').setAttribute("content", "5;url=https://www.google.com");
    }
    else {
      document.querySelector('meta[name="description"]').setAttribute("content", "5;url=https://www.hotmail.com");
    }
  });
</script>

困惑点 #

使用如下无分支逻辑的代码时，可正常工作（既重定向到Website B，又能加载Website A的Cookie），不清楚为何添加if/else分支后会出现问题。

<html>
<META HTTP-EQUIV="Refresh" CONTENT="5;url=www.websiteB.com">
<iframe id="MyFrame" style="width: 1px; height: 1px;"></iframe>
</html>

<script>
document.addEventListener("DOMContentLoaded", function(){
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var mainParameter = urlParams.get('tid');
var address = "www.websiteA.com/?tid=";
var combined = address + mainParameter;
console.log(combined);
var iframeSrcValue = document.getElementById("MyFrame").src;
document.getElementById('MyFrame').setAttribute("src", combined);
});
<script>

问题原因 #

1. meta标签识别错误：给刷新标签添加了name="description"属性，浏览器会将其识别为页面描述标签，而非跳转指令，后续修改content也可能无法被正确解析。
2. URL缺少协议头：所有目标地址未添加http://或https://，浏览器会将其当作相对路径处理，根本没有请求到目标网站。
3. 跳转时机过早：分支逻辑中先设置iframe的src再配置跳转，但跳转可能在iframe加载完成前就触发，导致Cookie还未写入就跳走了。

修复方案 #

修改后的代码如下：

<html>
  <!-- 移除name属性，确保是纯刷新跳转标签 -->
  <META HTTP-EQUIV="Refresh" CONTENT="">
  <iframe id="MyFrame" style="width: 1px; height: 1px; display: none;"></iframe>
</html>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);

    const tidParameter = urlParams.get("tid");
    const offerParameter = urlParams.get("offer");
    console.log(offerParameter);

    // 自动补全URL协议头，避免相对路径问题
    const fixUrl = (url) => {
      return /^https?:\/\//i.test(url) ? url : `https://${url}`;
    };

    if (offerParameter === "bb") {
      const combined = fixUrl(`www.websiteA.com/?tid=${tidParameter}`);
      const iframe = document.getElementById("MyFrame");
      iframe.src = combined;
      
      // 监听iframe加载完成事件，确保Cookie写入后再跳转
      iframe.addEventListener('load', () => {
        document.querySelector('meta[HTTP-EQUIV="Refresh"]').setAttribute("content", `5;url=${fixUrl("www.websiteB.com")}`);
      });
    }
    else if (offerParameter === "bd") {
      document.querySelector('meta[HTTP-EQUIV="Refresh"]').setAttribute("content", `5;url=${fixUrl("www.google.com")}`);
    }
    else {
      document.querySelector('meta[HTTP-EQUIV="Refresh"]').setAttribute("content", `5;url=${fixUrl("www.hotmail.com")}`);
    }
  });
</script>

关键修复点 #

• 删除meta标签的name="description"属性，让浏览器正确识别为刷新跳转标签。
• 给所有URL补全https://协议头，确保请求到正确的目标网站。
• 监听iframe的load事件，等Website A页面加载完成、Cookie写入后再触发跳转，避免过早跳转导致Cookie加载失败。
• 将iframe设置为display: none，彻底隐藏不影响页面布局。

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