window.frames["id"].location使用
阿新 • • 發佈：2020-08-22
由於最近需要維護一個老專案不得不去學習一些自己都沒接觸過的專案，老專案中雖然技術已經被淘汰，但是思想還是值得去學習探究的，無論是jsp，freemarker，freemarker這些模板引擎還是Vue的元件化，這些東西變化的是技術，但是不變的是思想，學習老專案中的程式碼有時候會有一種豁然開朗的感覺，幫助我們的認知。
比如從我接觸的一個專案對window.frames["id"].location的使用就可以簡單的實現一個頁面佈局。
頁面佈局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>
就可以實現一個簡單的佈局。預覽效果http://chsoul.gitee.io/test/iframe/Layout.html