母子页的iframe传参跳转，参数需要编码
编码 参数 需要 跳转 iframe 传参
2023-09-11 14:14:50 时间
背景：
我的项目是一个正常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>