특정 키보드 명령을 눌러 다른 페이지 간 전환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.changepages-index{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
header{
height: 60px;
width: 100%;
text-align: center;
line-height: 60px;
font-size: 20px;
}
#myrame{
width: 100%;
flex: 1;
}
</style>
<div class="changepages-index">
<header>这是头部</header>
</div>
</body>
<script>
var menuList = [
{name:'A页面',url:'http://A'},
{name:'B页面',url:'http://B'},
{name:'C页面',url:'http://C'},
{name:'D页面',url:'http://D'},
];
var key = 0;
var fatherTag = document.getElementsByClassName('changepages-index')[0]
var iframeTag = document.createElement('iframe')
iframeTag.src = menuList[key].url
iframeTag.id = 'myrame'
fatherTag.append(iframeTag)
document.onkeydown = function(e){
let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
if(e1 && e1.keyCode){
switch(e1.keyCode){
case 49:
key = 0;//1
break;
case 50:
key = 1;//2
break;
case 51:
key = 2;//3
break;
case 52:
key = 3;//4
break;
case 37:
case 38:
key === 0 ? key = 3 : key--//右、下
break;
case 39:
case 40:
key === 3 ? key = 0 : key++//左、上
break;
}
}
iframeTag.src = menuList[key].url
}
</script>
</html>
KeyCode 비교표