【踩坑系列-JS】iframe中的url参数获取

Author：赵志乾
Date：2024-07-24
Declaration：All Right Reserved！！！

1. 问题描述

        系统A的页面中以iframe的方式嵌入了系统B的页面，并需要将A页面url中的参数传递给B页面。

        最初的实现方式是：在B页面直接以下面的代码获取url参数，发现参数的值为undefined。

let searchParams = new URLSearchParams(window.location.search);   
console.log(searchParams.get(参数名)); 

2. 问题分析

        iframe的工作原理如下：

• 标签插入：使用<iframe>标签指定嵌入内容的位置，且该标签的src属性指定了要嵌入网页的URL；
• 上下文创建：浏览器解析到<iframe>标签时，会为嵌入的内容创建一个独立的上下文，即与主页面的上下文是分开的，这也就意味着嵌入的网页可以拥有自己的DOM结构、CSS样式和JS执行环境；
• 内容加载：浏览器依据<iframe>标签的src属性指定的URL，向服务器发送请求，获取嵌入网页的HTML、CSS和JS等资源，获取到这些资源后便在iframe中渲染这些资源；
• 交互与通信：虽然主页面与嵌入的网页有不同的上下文，但两者依然可以通过window.parent和window.frames属性来相互访问，以实现数据传递和方法调用；

        故iframe网页内通过window.location.search获取的是嵌入页面url参数，而非主页面的url参数。

3. 解决方案

        方案1：将主页面的url参数拼接到<iframe>的src属性的url上，之后便可通过window.location.search来访问，该方案更为通用；

        方案2：嵌入的页面通过window.parent.location.search来获取主页的url参数，但需要注意跨域限制；