第五章、窗口与框架

5.2　设置目标

源代码：

//主页面：Captain.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<meta charset="utf-8" />
　　<title>Captain</title>
　　<link rel="stylesheet" href="script.css" />
　　<script src="scripts/ShowAlert.js"></script>
</head>
<body>
　　<iframe src="iframe.html" id="icontent" name="icontent"></iframe>
　　<h1>Main Content Area</h1>
　　<h2>
　　　　<a href="html/page1.html">Link 1</a><br />
　　　　<a href="html/page2.html">Link 2</a><br />
　　　　<a href="html/page3.html">Link 3</a>
　　</h2>
</body>
</html>

//css文件：script.css

body {
　　background-color: #FFF;
}

iframe#icontent {
　　float: right;
　　border: 1px solid black;
　　width: 350px;
　　height: 300px;
　　margin-top: 100px;
}

//显示在iframe中的初始页面：iframe.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<meta charset="utf-8" />
　　<title>Content iframe</title>
</head>
<body>
　　Please load a page
</body>
</html>

//用JS来设置框架：

window.onload = initLinks;　　//window.onload = methodName：表示在页面加载时，调用methodName函数

function initLinks() {
　　for (var i = 0 ; i < document.links.length; i++) {　　//获取页面的所有链接
　　　　document.links[i].target = "icontent";　　//将a元素的target属性设置为iframe的name属性，就可以将a元素链接的  //内容显示到iframe内。（不过有些浏览器要求用id来设置，所以最好可以将id和name都相同设置。）
　　}
}

《JavaScript基础教程》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. JavaBean 基础概念、使用实例及代码分析

    JavaBean 基础概念.使用实例及代码分析 JavaBean的概念 JavaBean是一种可重复使用的.且跨平台的软件组件. JavaBean可分为两种:一种是有用户界面的(有UI的):另一种是没 ...

  2. 定制Android透明按钮

    自己在学习和做例子的过程中,常常会需要按钮,由于系统自带按钮样式不太好看,所以需要我们自己来定制项目得按钮,我常常采用2中方法: 1.是制作9-patch的图片,这样能够匹配文字内容的长短. 2.是指 ...

  3. KVO的底层实现

    1.KVO是基于Runtime机制实现的: 2.当某个类的对象的某个属性第一次被观察时,系统会在运行期间动态地创建该类的一个派生类,在这个派生类中重写基类的任何被观察属性的setter方法,派生类在被 ...

  4. Scrum三大角色特点

    灵感来自于一段冷笑话: 一天,一头猪和一只鸡在路上散步,鸡看了一下猪说,“嗨,我们合伙开一家餐馆怎么样?”,猪回头看了一下鸡说,“好主意,那你准备给餐馆起什么名字呢?”,鸡想了想说“餐馆名字叫火腿和鸡 ...

  5. Protocol and Delegate协议和代理

    1.什么是协议?  OC协议仿照Java的接口.协议和接口,都是不同类的对象之间一种通信的机制.2.协议的基础语法  单纯的语言描述协议的语法,很难让人理解,主要因为在OC中协议是类对象的通信机制,他 ...

  6. Web应用程序系统的多用户权限控制设计及实现-总结【11】

    Web应用程序系统的多用户权限控制设计及实现通过10章内容讲述已经结尾了.写这些博客的目的很简单,方便自己以后参考,也留下自己编程岁月的一些痕迹.对于编程,对于工作,真是心甘情愿的就好. 由于这只是一 ...

  7. 浅析Dagger2的使用

    什么是Dagger2 Dagger是为Android和Java平台提供的一个完全静态的,在编译时进行依赖注入的框架,原来是由Square公司维护,现在由Google维护. 我们知道Dagger是一个依 ...

  8. AndroidStudio添加依赖库

    以Gson为例 Step1:点击下图中的入口,进入ProjectStructure Step2: 在app项中选择Dependencies窗口,点击右侧的加号 Step3:在搜索框中输入gson,点击 ...

  9. windows server 开机自动登录并锁定

    这个操作对于广大使用Windows(包括xp/win7/2003/2008 R2 等windows 系统) 的上班族会有点用. 其一:如果是个人吧系统(win7.xp)上班时候打开电脑,自动登录,系统 ...

  10. 别再TM跟我说找不到满意的工作！

    上一篇老徐跟大家分享:如何判断自己在这家公司是否有成长? 今天只想跟大家说几个真是案例:别再TM总抱怨说找不到满意的工作 说明:如下案例,针对老徐当前的软件测试职业,其他职业可自己脑补--- / 1 ...