H50051： iframe嵌入，获取url参数，读取json数据模板

1， html 文件

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>文物展示</title>
    <script>
    </script>

    <style>
        html {
             100%;
            height: 100%;
            /* background-color: #1d292c; */
        }
        
        body {
            height: 100%;
             100%;
            margin: auto;
            /* background-image: url("./imgs/ui/BG.png"); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;
            user-select: none;
            overflow: hidden;
            position: fixed;
        }
        
        * {
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            -webkit-touch-callout: none;
            user-select: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            /* margin: 0; */
            /* padding: 0; */
        }
        
        .general {
            position: absolute;
            transition: opacity 0.3s;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .generalLC {
            position: absolute;
            transition: opacity 0.3s;
            background-size: contain;
            background-position: left center;
            background-repeat: no-repeat;
        }
        
        .generalRC {
            position: absolute;
            transition: opacity 0.3s;
            background-size: contain;
            background-position: right center;
            background-repeat: no-repeat;
        }
        
        .general2 {
            position: absolute;
            z-index: 1100;
            transition: opacity 0.3s;
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .opacityOnly {
            opacity: 0;
        }
        
        .pointEvtOnly {
            pointer-events: none;
        }
        
        .pointEvtAndOpa {
            opacity: 0;
            pointer-events: none;
        }
        
        .pointEvtN {
            pointer-events: none;
        }
        
        .animscalee {
            animation-name: scalee;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: cubic-bezier(0.5, 0.4, 0.4, 0.5);
        }
        
        @keyframe scalee {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.7);
            }
            100% {
                transform: scale(1);
            }
        }
        
        @-webkit-keyframes scalee {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.7);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .PDHome {
            position: absolute;
             100%;
            height: 100%;
            transition: opacity 1s;
        }
    </style>

</head>

<body>

    <iframe name="PDHome" id="PDHome" class="PDHome" src="" width="100%" height="100%" scrolling="no" frameborder="no" allowtransparency="yes" security="restricted" sandbox="allow-top-navigation allow-same-origin allow-popups allow-forms allow-scripts"></iframe>

    <script>
        function getParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var URL = decodeURI(window.location.search);
            var r = URL.substr(1).match(reg);
            if (r != null) {
                return decodeURI(r[2]);
            };
            return null;
        };
        document.title = getParam('title');
        // 读取外部json文件
        var url = "data.json" /*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
        var request = new XMLHttpRequest();
        request.open("get", url); /*设置请求方法与路径*/
        request.send(null); /*不发送数据到服务器*/
        request.onload = function() { /*XHR对象获取到返回信息后执行*/
            if (request.status == 200) { /*返回状态为200，即为数据获取成功*/
                var json = JSON.parse(request.responseText);
                for(var i=0;i<json.length;i++){
                    // console.log(json[i].name);
                    if(getParam('id') == json[i].id){
                        document.getElementById("PDHome").src = json[i].url;
                    }
                }
            }
        };

    </script>
    

</body>

</html>

2，json文件

[
    
    {
        "id" : 0,
        "url" : "B20PHM/ms0.html"
    },
    {
        "id" : 1,
        "url" : "https://www.baidu.com/"
    }

]

琥珀君的博客

H50051： iframe嵌入 ，获取url参数，读取json数据 模板

H50051： iframe嵌入，获取url参数，读取json数据模板