网站制作如何做,wordpress热门文章,嵌入式开发软件,11月70款国产网络游戏获批Author#xff1a;赵志乾
Date#xff1a;2024-07-24
Declaration#xff1a;All Right Reserved#xff01;#xff01;#xff01;
1. 问题描述 系统A的页面中以iframe的方式嵌入了系统B的页面#xff0c;并需要将A页面url中的参数传递给B页面。 最初的实现方式是赵志乾
Date2024-07-24
DeclarationAll 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参数但需要注意跨域限制
