第五章、窗口与框架

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. Android自带的theme

    android:theme="@android:style/Theme.Dialog" 将一个Activity显示为能话框模式 android:theme="@andro ...

  2. mac 终端(terminal) 启动tomcat

    mac 终端启动tomcat: 找到你的tomcat安装的根目录:找到bin目录,在终端 cd 到这个bin中,输入sudo ./startup.sh (然后终端会提示你输入本机密码如果是在需要权限的 ...

  3. 【VLC-Android】Mac下编译vlc-android

    前言 突然想整整VLC-Android,然后就下一个玩玩看,这里记录点遇到的问题. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: htt ...

  4. yii2集成富文本编辑器redactor

    作者:白狼 出处:http://www.manks.top/article/yii2_redactor本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...

  5. 编写可测试的JavaScript代码

    <编写可测试的JavaScript代码>基本信息作者: [美] Mark Ethan Trostler 托斯勒 著 译者: 徐涛出版社:人民邮电出版社ISBN:9787115373373上 ...

  6. JavaScript（七）——视频插入

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  7. SQL Server 2012实施与管理实战指南(笔记)——Ch4数据库连接组件

    4.数据库连接组件 访问数据库有多种不同的技术,包括ADO,ODBC,OLEDB,ADO.NET等这些都有一些共性.首先要建立连接(Connection),然后通过命令(Command)对数据库进行访 ...

  8. MySQL 命令行工具之 mysqldump 深入研究

    mysqldump 是MySQL的一个命令行工具,用于逻辑备份.可以将数据库和表的结构,以及表中的数据分别导出成:create database, create table, insert into的 ...

  9. ARM指令

    语法格式 <opcode>{<cond>}{S} <Rd>, <Rn>,<shifter_operand> {}表示是可选的部分,<& ...

  10. x01.Game.CubeRun: 风一样的女子

    1.题解 小孩学英语比较有意思,Monkey three => 猴三,风一样的女子 => 风 Girl.诸如此类不是重点,重点是一花一世界,一草一天堂.花花草草,纷纷扰扰.大千世界,当别具 ...