document.getElementById修改Google Data Studio嵌入iframe src报404如何解决

• 解码方法适配问题：当前使用decodeURI处理传入的iframe地址，decodeURI不会解码/ ? : @ &这类URL保留字符，如果传入的event.data是经过encodeURIComponent全量编码的内容，解码后会出现URL结构异常。普通站点对非法URL的容错率较高，而Google Data Studio对URL格式校验极其严格，微小的结构错误就会触发404响应。
• 动态赋值时的URL标准化缺失：直接写死src属性时，浏览器会自动对URL做去空格、修正转义等标准化处理，而动态赋值时如果传入的内容存在多余转义字符、首尾空格等问题，不会被自动修正，也会导致Google服务识别地址失败。

直接写死src时两个地址都能正常加载，说明Google Data Studio报告本身的分享权限、嵌入配置都是正常的，问题完全出在动态赋值的URL处理逻辑上。

1. 调整URL解码逻辑，优先保留原始URL的完整性，不要强制解码，修改对应的JS代码如下：

window.onmessage = (event) => {
  if (!event.data) return;
  let targetUrl;
  try {
    // 优先尝试直接使用原始传入值构造合法URL
    targetUrl = new URL(event.data.trim());
  } catch (err) {
    // 原始值不合法时再尝试全量解码后构造
    targetUrl = new URL(decodeURIComponent(event.data.trim()));
  }
  document.getElementById("myIframe").src = targetUrl.href;
  console.log('最终加载地址：', targetUrl.href);
}

2. 补充页面Referrer配置，保证Google服务能正常校验请求来源，在页面head标签内添加如下meta节点：

<meta name="referrer" content="no-referrer-when-downgrade">

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