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

    一,什么是systemd的target? 1,关于systemd/systemctl的相关知识,请移步到这一篇 https://www.cnblogs.com/architectforest/p/12 ...

  2. 【Azure Redis 缓存 Azure Cache For Redis】在创建高级层Redis(P1)集成虚拟网络(VNET)后，如何测试VNET中资源如何成功访问及配置白名单的效果

    当使用Azure Redis高级版时候,为了能更好的保护Redis的安全,启用了虚拟网路,把Redis集成在Azure中的虚拟网络,只能通过虚拟网络VENT中的资源进行访问,而公网是不可以访问的.但是 ...

  3. ThreeJS学习6_几何体相关(BufferGeometry)

    ThreeJS学习6_几何体相关(BufferGeometry) 使用 BufferGeometry 可以有效减少向 GPU 传输几何体相关数据所需的开销 可以自定义顶点位置, 面片索引, 法向量, ...

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

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

  5. Jmeter入门（1）- 什么是Jmeter以及Jmeter的安装和环境配置

    一. Jmeter简介 Jmeter时Apacha公司使用Java平台开发的一款测试工具 二. Jmeter可以做什么 Jmeter可以用来做接口测试.性能测试.压力测试.数据库测试.Java程序测试 ...

  6. 大白话聊OSI七层模型和TCP/IP四层模型

    前言 今天和大家聊的是一个比较基础的问题,OSI七层模型和TCP/IP四层模型. 小伙伴们可能有疑问,这个东西还用写文章吗,太基础了吧,网上文章多的是,随便一搜索就能找到. 确实是这样,网上资料确实很 ...

  7. Android测试工具 UIAutomator介绍

    UI Automator 测试工具定义以及用途 UI Automator 测试框架提供了一组 API,用于构建在用户应用和系统应用上执行交互的界面测试.通过 UI Automator API,您可以执 ...

  8. 第1天｜12天搞定Python网络爬虫，吃里爬外？

    人力资源部漂亮的小MM,跑来问我:老陈,数据分析和爬虫究竟是关系呀?说实在的,我真不想理她,因为我一直认为这个跟她的工作关系不大,可一想到她负责我负责部门的招聘工作,我只好勉为其难地跟她说:数据分析, ...

  9. GridView使用SimpleAdapter

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app=&q ...

  10. Spring Boot打包部署

    date: 2018-11-19 15:30:11 updated: 2018-11-21 08:28:37 Spring Boot打包部署 第一种方式 打包成jar包部署在服务器上 1.1 添加插件 ...