第五章、窗口与框架

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. Hosting socket.io WebSocket apps in IIS using iisnode

    In this post I explain how to configure a socket.io node.js application to use of WebSockets when ho ...

  2. Android HTTP实例 使用GET方法和POST方法发送请求

    Android HTTP实例 使用GET方法和POST方法发送请求 Web程序:使用GET和POST方法发送请求 首先利用MyEclispe+Tomcat写好一个Web程序,实现的功能就是提交用户信息 ...

  3. Android 调用已安装市场，进行软件评分的功能实现

    Uri uri = Uri.parse("market://details?id="+getPackageName()); Intent intent = new Intent(I ...

  4. 【代码笔记】iOS-iCarouselDemo

    一,效果图. 二,工程图. 三,代码. RootViewController.h RootViewController.m myCell.h #import <UIKit/UIKit.h> ...

  5. 【读书笔记】iOS网络-解析响应负载

    Web Service可以通过多种格式返回结构化数据, 不过大多数时候使用的是XML与JSON.也可以让应用只接收HTML结构的数据.实现了这些Web Service或是接收HTML文档的应用必须能解 ...

  6. GCD应用及其他方法

    1.GCD应用 单例模式        static dispatch_once_t onceToken;    dispatch_once(&onceToken, ^{            ...

  7. Xcode常见错误汇总

    1.error: macro names must be identifiers YourProject_prefix.pch 原因: 因为你弄脏了预处理器宏,在它处于<Multiple Val ...

  8. VisualSVN Server的配置和使用方法 图文

    转载 http://www.jb51.net/article/17365.htm VisualSVN Server是免费的,而VisualSVN是收费的.VisualSVN是SVN的客户端,和Visu ...

  9. 安装php扩展

    下面我以soap安装为例子 cd /home/zhangy/php-5.2.6/ext/soap /usr/local/php/bin/phpize#确定php-config文件在不在,调用php-c ...

  10. sublime text 3 常用快捷键 、常用插件

    常用快捷键 查找( Ctrl + P ) 找到任何东西 - :+行号   定位到具体的行 - @+符号  js的函数名, css的选择器名 - #+关键字  定位到特定的关键字 命令面板 (Ctrl ...