JS动态设置iframe src时URL参数&被编码为&的问题

这个问题不是JavaScript主动转义了&符号，是代码写法和HTML实体转义规则共同导致的：

• 你在JS拼接URL的逻辑里，手动把参数分隔符写成了HTML实体&，而非URL标准规定的原生&字符。
• 当你通过JS给iframe的srcDOM属性赋值后，在开发者工具里查看渲染后的HTML源码时，浏览器会自动对属性值里的&字符做HTML实体转义：你代码里预先写好的&开头的&会被转义为&，最终拼接出来就成了你看到的&，导致URL参数结构被破坏，iframe内自然无法正确读取参数。

这里要注意区分场景：只有直接手写静态HTML标签属性的时候，才需要把属性值里的&转义为&符合HTML规范；在JS代码里操作DOM属性、拼接URL时，不需要预先做HTML实体转义，直接使用原生字符即可。

• 把URL拼接逻辑里的&全部替换为原生&作为参数分隔符
• 对所有动态传入的参数值使用encodeURIComponent()做URL编码，避免参数值内包含特殊字符（&、=、空格、中文等）时打乱URL结构

修正后的代码如下：

const myIframe = document.getElementById("myiframe");
const src = `https://mywebsite.com/?first_name=${encodeURIComponent(firstName)}&last_name=${encodeURIComponent(lastName)}&email=${encodeURIComponent(email)}`;
myIframe.src = src;

赋值完成后不需要额外做转义处理，浏览器会自动处理DOM属性到HTML展示层的编码逻辑，iframe加载时会自动识别、解析正确的URL参数。

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