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参数,但需要注意跨域限制;