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/" } ]