背景：

我的项目是一个正常html嵌套了一个iframe,

项目需要传参后，改变iframe的src属性值，实现显示不同的页面

说明：

再不传值的时候显示是这样的

传值后显示所传值的页面

例如页面值是：

http://www.quanxi.cc/?cplvfx=123

源码：

母页代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>母页-母子页的iframe传参跳转，参数需要编码</title>
</head><body><h1>我是母页</h1><h3>母子页的iframe传参跳转，参数需要编码</h3><iframe id="iframes" src="iframe_Son.html" frameborder="2" width="100%" height="1000"> </iframe><script>// 获取url中参数function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return ('');}/*escape('我是测试') 结果： "%u6211%u662F%u6D4B%u8BD5"encodeURIComponent('http://www.quanxi.cc/?cplvfx=123')  结果："http%3A%2F%2Fwww.quanxi.cc%2F%3Fcplvfx%3D123"*/window.onload = function () {//iframe传值  iframeName需要escape()编码；iframeUrl需要encodeURIComponent()编码  var iframeName = getQueryVariable('iframeName'); //获取参数var iframeUrl = getQueryVariable('iframeUrl'); //获取参数iframeUrl = decodeURIComponent(iframeUrl); //获取参数 iframeName = unescape(iframeName); //解码if (iframeName.length > 1 && iframeUrl.length > 5) {document.querySelector("#iframes").src = iframeUrl;}//iframe传值 end}</script>
</body></html>

子页代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子页-母子页的iframe传参跳转，参数需要编码</title>
</head>
<body><h1>我是子页</h1><h3>母子页的iframe传参跳转，参数需要编码</h3>
</body>
</html>

母子页的iframe传参跳转，参数需要编码相关推荐

iframe传参问题
方法一:postmessage 传参数子向父页面传参 window.parent.postMessage({ // 参数是对象DOCK_ID: ship.userData.dockId, }, '* ...
微信小程序页面导航、传参、接收参数
页面导航指的是页面之间的相互跳转,在微信小程序中,页面导航分为如下两种: 1.声明式导航: 在页面上声明一个<navigator>导航组件通过点击<navigator>导航组 ...
python sql语句传参数_pyMySQL SQL语句传参问题,单个参数或多个参数说明
在用pymysql操作数据库的过程中,给sql语句传参碰到了很多问题,网上传参策略很多,这里推荐两种单个传参用%s,写起来比较简单: field = '-' sql_talk="UPDAT ...
C/C++语言传参、返回参数知识点讲解
在我们编写程序时,大多数情况下都是函数传参,接收返回参数,但这中间有一定的操作系统内存传递原理,当你看完这篇文章你会发现,噢!原来这样使用会出错之类的感想! 最简单的,函数现场保护,通常操作系统会使用 ...
Vue路由传参和接收参数
Vue 路由传参和接收参数主要有四种解决方法如下:
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
Strut2页面传参跳转 --Struts2
1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...
【debug】使用lambda在循环中传参时，参数总为同一个值
发现问题: 当我使用PyQt5在写一个文本处理小工具时,需要在调用事件时传入参数,于是想到了lambda函数,代码如下: def radiotext(self):'''文档输出格式选择功能'''# 自 ...
vue前后端aes url传参解密再解base64编码
需求:我们公司做机票订购服务,有自己的平台的订单,也有第三方网站向我们网站导入的用户订单,第三方导入的是通过url传参的方式导入.url会携带用户的相关信息. url里面的参数是经过aes加密和bas ...

母子页的iframe传参跳转，参数需要编码

背景：

说明：

源码：

母页代码

子页代码

母子页的iframe传参跳转，参数需要编码相关推荐

最新文章

热门文章