首页 前端知识 【踩坑系列-JS】iframe中的url参数获取

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

2024-09-01 23:09:53 前端知识 前端哥 699 572 我要收藏
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参数,但需要注意跨域限制;

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17443.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!