第五章、窗口与框架

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. 开通了个人微信公众号:slbGTD,准备把GTD相关的内容写成一本书

    <Get Things Done>是一本书的名字,简称为GTD,中文书名为<搞定>,同时GTD也是一种时间管理.自我管理的系统性方法,既有让你办事更有效率的技巧,也有多个的视角 ...

  2. Java和Android Http连接程序:使用java.net.URL 下载服务器图片到客户端

    Java和Android Http连接程序:使用java.net.URL 下载服务器图片到客户端 本博客前面博文中利用org.apache.http包中API进行Android客户端HTTP连接的例子 ...

  3. 使用Masonry搭建特殊布局时与xib的对比

    之前只有比较浅的接触过Masonry.项目中大多数的布局还是用xib中的AutoLayout与手码的frame计算相结合,相信也会有很多项目和我一样是这两种布局的组合.其实xib各方面用的感觉都挺好, ...

  4. JavaSE 和 JavaEE 的关系

    1.javaSe看成是java基础   (Standard Edition(标准版) ) 2.J2EE看成是应用            (Enterprise Edition(企业版)) 3.java ...

  5. setRequestedOrientation设置屏幕方向

    void android.app.Activity.setRequestedOrientation(int requestedOrientation)   官方API解释:     Change th ...

  6. hypervisor与VMware共存方法

    bcdedit /set hypervisorlaunchtype offbcdedit /set hypervisorlaunchtype auto

  7. 17、文案人员 - IT软件人员书籍系列文章

    这里说的文案人员是软件项目中的一个角色.其主要负责相关文档的整理,用户使用说明书的编写等等,在项目中是一个辅助的角色. 文案人员所做的事情不错,但是她能够辅助软件配置管理工程师进行工作,更好的为维护文 ...

  8. NSString与奇怪的retainCount

    话题从sunnyxx的<黑幕背后的Autorelease>开始 文章开头有个小例子 __weak id reference = nil;- (void)viewDidLoad { [sup ...

  9. 十五天精通WCF——第二天 告别烦恼的config配置

    经常搞wcf的基友们肯定会知道,当你的应用程序有很多的“服务引用”的时候,是不是有一种疯狂的感觉...从一个环境迁移到另外一个环境,你需要改变的 endpoint会超级tmd的多,简直就是搞死了人.. ...

  10. 预写式日志(Write-Ahead Logging (WAL))

    SQL Server中使用了WAL(Write-Ahead Logging)技术来保证事务日志的ACID特性.而且大大减少了IO操作. WAL的核心思想是:在数据写入到数据库之前,先写入到日志.再将日 ...