由于最近需要维护一个老项目不得不去学习一些自己都没接触过的项目，老项目中虽然技术已经被淘汰，但是思想还是值得去学习探究的，无论是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>

就可以实现一个简单的布局。

window.frames["id"].location使用的更多相关文章

  1. javascript宿主对象之window.frames

    window.frames属性是当前页面所有框架的集合.要注意的事,这里并没有frame和iframe做出区分.而且,无论页面存不存在框架,window.frames属性总是存在的,并总是指向wind ...

  2. window.frames

    // 点击事件 function zTreeOnClick(event, treeId, treeNode) { id = treeNode.id; window.frames["treeF ...

  3. window.frames[]在Firefox下无法兼容的解决方式

    html代码段: <iframe id="fr" src="ProjectTree.aspx?IsFree=true&f=yes&IsCheckPr ...

  4. window.frames && iframe 跨页面通信

    1.定义 frames[]是窗口中所有命名的框架组成的数组.这个数组的每个元素都是一个Window对象,对应于窗口中的一个框架. 2.用法 假设iframe 是一个以存在的 iframe 的 ID 和 ...

  5. window.frames[iframe].document 在ie可以用，在360、火狐中都不兼容？

    <iframe id="myf" scrolling="auto" frameborder="0" src="" ...

  6. 关于为什么window.frames[0].src不能获取src

    在DOM文档对象模型中,window对象处于最高层,而框架除了是当前窗体的一个节点外,本身也是独立window对象,当frames作为window对象时,有name属性, 而没有src属性,只有作为节 ...

  7. document.frames与window.frames在不同浏览器中的使用

    问题: document.frames 只有 IE Opera 支持.等同于 window.frames.用来取得当前页面内 window 对象的集合. 在 Firefox Chorome Safar ...

  8. window.frames在不同浏览器中的用法

    document.frames 等同于 window.frames,用来取得当前页面内 window 对象的集合. 不支持Firefox,其他浏览器(chrome.opera.IE.360)均支持. ...

  9. Prompt isNaN 数组 function DOM window.open/close/location/history

    1.prompt的利用 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...

随机推荐

  1. cmd/powershell常用命令 git常用命令

    cmd/powershell: 1. 新建文件夹: mkdir directoryName 2. 新建文件: cmd: type nul>fileName (空文件) powershell: n ...

  2. SE第一次作业

    作业一.对软件工程的初步认识 下面是我对于软件工程的认识,结合自己的理解和课上听讲的内容 软件工程=软件+工程?软件工程是否就是简单的软件+工程呢?那么我们先来看下各自的概念. 那么什么叫软件呢,既然 ...

  3. C# 微支付退款申请接口 V3.3.6

    /// <summary>/// 微支付退款申请/// </summary>/// <param name="context"></par ...

  4. Linux文件元数据和节点表结构

    文件元数据 一块硬盘的分区可以认为有两部分组成,保存元数据的成为节点表,用来保存属性等. 元数据中有个小指针,指向数据存放的实际空间. 元数据(Metadata) 又称中介数据.中继数据,为描述数据的 ...

  5. 想买保时捷的运维李先生学Java性能之 JIT即时编译器

    前言 本文记录日常学习<深入理解Java虚拟机>,不知道为啥感觉看一遍也就过了,喜欢动动手理解理解,这样才有点感觉,静不下心来的时候,看书抄书也可以用这个办法. 一.什么是JIT(Just ...

  6. ubuntu 搭建samba服务器&挂载（mount）代码到本地

    一.搭建samba服务器 1.下载: sudo apt-get install samba samba-common 2.创建共享文件夹MyShare: mkdir /home/user/MyShar ...

  7. Linux入门到放弃之一《在VMware虚拟机中安装Linux系统（RedHat）》

    1.启动VMware: 2.新建虚拟机: 3.自定义配置(1安装客户机操作系统点击"稍后安装操作系统"2选择客户机操作系统为Linux,版本为Red Hat Enterprise ...

  8. 10 张图打开 CPU 缓存一致性的大门

    前言 直接上,不多 BB 了. 正文 CPU Cache 的数据写入 随着时间的推移,CPU 和内存的访问性能相差越来越大,于是就在 CPU 内部嵌入了 CPU Cache(高速缓存),CPU Cac ...

  9. iOS 14 egret 游戏卡顿问题分析和部分解决办法

    现象 总体而言,iOS 14 渲染性能变差,可以从以下三个测试看出. 测试1:简单demo,使用egret引擎显示3000个图(都是同一个100*100 png 纹理),逐帧做旋转.(博客园视频播放可 ...

  10. 云计算管理平台之OpenStack镜像服务glance

    一.glance简介 openstack中的glance服务是用来存储在openstack上启动虚拟机所需镜像:它主要用于发现.注册及检索虚拟机镜像:它通过提供RESTful风格的api对外提供服务: ...