第五章、窗口与框架

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. sharepoint 2013 持续爬网

    能否对所有类型的内容源都使用连续爬网?不能.连续爬网仅适用于 SharePoint 型内容源.所有其他类型的内容源将继续选择增量爬网和完全爬网. 使用连续爬网是否会给存储库增加额外负载?连续爬网的资源 ...

  2. 为Autodesk Viewer添加自定义工具条

    如果你参加过我们近期的活动,你就会频繁的听到我们现在正在做的Autodesk Viewer大模型浏览器,这是一个不需要下载任何插件,基于WebGL技术的浏览器,可以支持几十种数据格式.同时viewer ...

  3. 最全面的NSDateHelper 分享

    NSDateUtil 分享 (ios开发交流群:486468672) 代码下载:https://github.com/foxswang/NSDateUtil 史上最全面NSDate Utility 没 ...

  4. JS DOM学习笔记

    1.window对象代表当前浏览器窗口 2.使用window对象的属性.方法的时候可以省略window.例如:window.alert("hello")一般写成alert(&quo ...

  5. 如何让光标处于EditText的末尾

    经测试发现,如果EditText预先有内容,光标自然会在文字的末尾 . 但是如果预先内容为空,然后设置好内容,这种情况下光标自然会在文字的开头,所以这种情况下可以这样做让光标位于末尾: editTex ...

  6. 使用imeOptions

    Android的软键盘右下角有Action按钮,如下图的“上一步” 在EditText中有 android:imeOptions选项,它包括完成按钮“actionDone”,发送按钮“actionSe ...

  7. 【代码笔记】iOS-显示图片的各种方式

    代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. UI ...

  8. 【读书笔记】iOS网络-三种错误

    一,操作系统错误. iOS人机界面指南中,Apple建议不要过度使用AlertViews,因为这会破坏设备的使用感受. 操作系统错误: 1,没有网络. 2,无法路由到目标主机. 3,没用应和监听目标端 ...

  9. Mac iOS Json 操作Model to JSON

    在移动网络时代,json成为了主流的数据交换格式.如何能够方便快捷的创建.转化.传递json文件称为了开发者必备的技能.幸好,我们生活在开源时代,很多功能不需要我们重现造轮子.今天我推荐一款开源jso ...

  10. [修复Win8.1 BUG] 解决Win8.1英文字体发虚不渲染问题

    Win8.1更新了宋体字体,中文字体显示漂亮了,但英文字体发虚不渲染,尤其是小号的英文和数字字体,看下图. 1.下载Win8的宋体2.打开字体文件点击安装3.导入注册表文件4.重启Win8.1 下载链 ...