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 { width: 100%; height: 100%; /* background-color: #1d292c; */ } body { height: 100%; width: 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; width: 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/" } ]
琥珀君的博客