Web前端开发技术

Appearance

文档、页面、窗口与框架 ​

元信息 ​

  • 目标：分清文档/文件/页面/窗口这几个"容器"各自对应的视角（信息/存储/网络/渲染），理解 iframe 组合独立页面的能力与代价
  • 关键概念：文档、文件、页面、窗口、iframe、嵌套、framesets（已废弃）
  • 关联阶段：cp1
  • 常见误区：把文档与文件当同义词（文件是存储单元，文档是信息单元）；以为 iframe 里的页面和主页面共享数据（各自独立）；不知道 framesets 已在 HTML5 废弃还在用；忽略 iframe 对非视觉用户（读屏器/爬虫）无意义这一代价

文档、页面、窗口 ​

  • 文档： 从信息使用者的角度，将多段代码或数据组合和视作为一个整体，即一个单元，比如html文档、css文档、png文档等，分别对应于不同的文档类型
    • 文件： 是从存储角度划分的一个单元
  • 页面： 是从Web网络的角度，将多个文档或文件或资源组合为一个单元，便于网络上的标识和引用
  • 窗口： 是从操作系统进行可视化渲染的角度进行划分的单元，一般一个窗口对应于一个页面

本质上，上述概念都起着容器的作用，但对应于不同的环境

在浏览器运行时里，这些概念各有其化身：当前文档对应 document 对象，窗口对应 window 对象，页面的标识就是 URL（location）。运行下面的示例，可以看到三者报告的是不同层面的信息：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
  • 文档问的是"内容是什么"，窗口问的是"在哪里渲染"，页面问的是"网络如何标识与引用"
  • 一个窗口可以通过历史导航（前进/后退）先后承载多个页面；一个页面也可以同时出现在多个窗口中（如"在新窗口打开"）——三者相关，但不是一回事

框架 ​

  • 我们通过<img>等标记将多个资源或附件组合成一个页面
  • 我们通过<a>标记将多个页面链接组成一个站点
  • 那么，可否将多个独立的页面组合成为一个页面？

HTML提供框架<iframe>标记，将多个完整的页面(区别于资源或附件)组合为一个页面，但同时又保持各页面的独立性（各页面之间的数据不共享、互动操作不相干）

  • 对于非视觉用户（如语音阅读器、搜索爬虫等），iframe则是无意义的。

iframe ​

  • <iframe>的作用相当于将子文档嵌入到主文档中
  • 示例中 <a target='newsrc'>的用法是：当触发该链接时，它将链接标记指向的页面嵌入到名称为_newsrc_的<iframe>中，相当于给<iframe>重新指定了src的属性
  • <iframe>允许多重嵌套，即<iframe><iframe></iframe></iframe>是合法的，本节代码示例控件即基于此实现

下面是可运行的 <a target> 示例——点击链接，目标页面被嵌入到名为 newsrc 的框架中，而不是替换当前页面：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox
  • 若目标站点通过响应头（如 X-Frame-Options: DENY）拒绝被嵌入，框架会显示空白——多数大型站点（百度、知乎等）均如此，这正是"页面保持独立性"在安全层面的体现

多重嵌套的示例——框架里的框架。外层框架的内容由 srcdoc 属性直接给出，无需独立文件：

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

高级应用示例 ​

在 http://jq22.com 这类代码演示网站中，实现如下效果：

  • 如何为众多不同来源的示例代码提供统一的演示界面，譬如站点顶端的工具栏
  • 如何防止演示示例的css或javascript不会和jq22自身的代码发生冲突

framesets ​

你或许听说过这个标记，它将多个页面定义为一个页面组，并且多个页面在不同的窗口中显示，承担不同的角色，多被用于实现固定侧边栏一类的可视化效果。正是由于该标记这种可视化窗口之间过于紧密的联系，在HTML5中被废弃，请勿使用！

参考 ​