<span>window.frames["id"].location使用</span>
由于最近需要维护一个老项目不得不去学习一些自己都没接触过的项目，老项目中虽然技术已经被淘汰，但是思想还是值得去学习探究的，无论是jsp，freemarker，freemarker这些模板引擎还是Vue的组件化，这些东西变化的是技术，但是不变的是思想，学习老项目中的代码有时候会有一种豁然开朗的感觉，帮助我们的认知。
比如从我接触的一个项目对window.frames["id"].location的使用就可以简单的实现一个页面布局。预览效果http://chsoul.gitee.io/test/iframe/Layout.html
页面布局Layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
margin: 0;
padding: 0;
}
.content-menu {
width: 20%;
height: calc(100vh);
float: left;
background: #304156;
box-sizing: border-box;
}
.content-center {
width: 80%;
height: calc(100vh);
background: aliceblue;
box-sizing: border-box;
float: left;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
color: white;
font-weight: 500;
height: calc(10vh);
line-height: calc(10vh);
padding: 0 10%;
cursor: pointer;
font-size: 25px;
}
ul li:hover{
background: burlywood;
color: black;
}
</style>
</head>
<body>
<div class="content">
<div class="content-menu">
<ul>
<li url="http://www.baidu.com/">百度</li>
<li url="https://www.aliyun.com/">阿里巴巴</li>
<li url="https://www.bilibili.com/">哔哩哔哩</li>
</ul>
</div>
<div class="content-center">
<iframe name="center" frameborder="0" width="100%" height="100%" id="center" src="./empty.html"></iframe>
</div>
</div>
<script>
window.onload = function () {
let tags = document.getElementsByTagName("li");
for(let tag of tags){
tag.onclick = function(){
window.frames['center'].location = this.attributes['url'].value
}
}
}
</script>
</body>
</html>
空白容器页面empty.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
就可以实现一个简单的布局。
