母子页的iframe传参跳转，参数需要编码-CFANZ编程社区

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

背景：

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

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

说明：

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

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

传值后显示所传值的页面

例如页面值是：

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

母子页的iframe传参跳转，参数需要编码_获取参数_02

源码：

母页代码

<!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>

0 条评论