10.脚本与交互组件

合并原 11.script脚本 + 16.其他标签 + 17.网页设计：script/noscript标签(加载/async/defer/module)、dialog/details交互组件、viewport移动端适配。

<script>标签用于在网页插入脚本，<noscript>标签用于指定浏览器不支持脚本时的显示内容。

<script>

<script>用于加载脚本代码，目前主要是加载 JavaScript 代码。

<script>
console.log('hello world');
</script>

上面代码嵌入网页，会立即执行。

<script>也可以加载外部脚本，src属性给出外部脚本的地址。

<script src="javascript.js"></script>

上面代码会加载javascript.js脚本文件，并执行。

type属性给出脚本的类型，默认是 JavaScript 代码，所以可省略。完整的写法其实是下面这样。

<script type="text/javascript" src="javascript.js"></script>

type属性也可以设成module，表示这是一个 ES6 模块，不是传统脚本。

<script type="module" src="main.js"></script>

对于那些不支持 ES6 模块的浏览器，可以设置nomodule属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

<script>还有下面一些其他属性，大部分跟 JavaScript 语言有关，可以参考相关的 JavaScript 教程。

• async：该属性指定 JavaScript 代码为异步执行，不是造成阻塞效果，JavaScript 代码默认是同步执行。
• defer：该属性指定 JavaScript 代码不是立即执行，而是页面解析完成后执行。
• crossorigin：如果采用这个属性，就会采用跨域的方式加载外部脚本，即 HTTP 请求的头信息会加上origin字段。
• integrity：给出外部脚本的哈希值，防止脚本被篡改。只有哈希值相符的外部脚本，才会执行。
• nonce：一个密码随机数，由服务器在 HTTP 头信息里面给出，每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单，只有在白名单内的脚本才能执行。
• referrerpolicy：HTTP 请求的Referer字段的处理方法。

<noscript>

<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。

<noscript>
  您的浏览器不能执行 JavaScript 语言，页面无法正常显示。
</noscript>

上面这段代码，只有浏览器不能执行 JavaScript 代码时才会显示，否则就不会显示。

本章介绍一些最新引入标准的标签。

<dialog>

基本用法

<dialog>标签表示一个可以关闭的对话框。

<dialog>
  Hello world
</dialog>

上面就是一个最简单的对话框。

默认情况下，对话框是隐藏的，不会在网页上显示。如果要让对话框显示，必须加上open属性。

<dialog open>
  Hello world
</dialog>

上面代码会在网页显示一个方框，内容是Hello world。

<dialog>元素里面，可以放入其他 HTML 元素。

<dialog open>
  <form method="dialog">
    <input type="text">
    <button type="submit" value="foo">提交</button>
  </form>
</dialog>

上面的对话框里面，有一个输入框和提交按钮。

注意，上例中<form>的method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性（上例是foo）。

JavaScript API

<dialog>元素的 JavaScript API 提供Dialog.showModal()和Dialog.close()两个方法，用于打开/关闭对话框。

const modal = document.querySelector('dialog');

// 对话框显示，相当于增加 open 属性
modal.showModal();

// 对话框关闭，相当于移除 open 属性
modal.close();

开发者可以提供关闭按钮，让其调用Dialog.close()方法，关闭对话框。

Dialog.close()方法可以接受一个字符串作为参数，用于传递信息。<dialog>接口的returnValue属性可以读取这个字符串，否则returnValue属性等于提交按钮的value属性。

modal.close('Accepted');
modal.returnValue // "Accepted"

Dialog.showModal()方法唤起对话框时，会有一个透明层，阻止用户与对话框外部的内容互动。CSS 提供了一个 Dialog 元素的::backdrop伪类，用于选中这个透明层，因此可以编写样式让透明层变得可见。

dialog {
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* make the backdrop a semi-transparent black */
  background-color: rgba(0, 0, 0, 0.4);
}

上面代码不仅为<dialog>指定了样式，还将对话框的透明层变成了灰色透明。

<dialog>元素还有一个Dialog.show()方法，也能唤起对话框，但是没有透明层，用户可以与对话框外部的内容互动。

事件

<dialog>元素有两个事件，可以监听。

• close：对话框关闭时触发
• cancel：用户按下esc键关闭对话框时触发

如果希望用户点击透明层，就关闭对话框，可以用下面的代码。

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

<details>，<summary>

基本用法

<details>标签用来折叠内容，浏览器会折叠显示该标签的内容。

<details>
这是一段解释文本。
</details>

上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样。

▶ Details

用户点击这段文本，折叠的文本就会展开，显示详细内容。

▼ Details
这是一段解释文本。

再点击一下，展开的文本又会重新折叠起来。

<details>标签的open属性，用于默认打开折叠。

<details open>
这是一段解释文本。
</details>

上面代码默认打开折叠。

<summary>标签用来定制折叠内容的标题。

<details>
  <summary>这是标题</summary>
  这是一段解释文本。
</details>

上面的代码显示结果如下。

▶ 这是标题

点击后，展示的效果如下。

▼ 这是标题
这是一段解释文本。

通过 CSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头。

summary::-webkit-details-marker {
  background: url(https://example.com/foo.svg);
  color: transparent;
}

下面的样式是另一种替换箭头的方法。

summary::-webkit-details-marker {
  display: none;
}
summary:before {
  content: "\2714";
  color: #696f7c;
  margin-right: 5px;
}

JavaScript API

Details元素的open属性返回<details>当前是打开还是关闭。

const details = document.querySelector('details');

if (detail.open === true) {
  // 展开状态
} else {
  // 折叠状态
}

Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件。

details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展开状况 */
  } else {
    /* 折叠状态 */
  }
});

参考链接

• Meet the New Dialog Element (opens new window), Keith J. Grant
• The dialog element: The way to create tomorrow’s modal windows (opens new window), Abhishek Jakhar
• Details/Summary is the Easiest Way Ever to Make an Accordion (opens new window), Chris Coyier

<meta>的 viewport 设置

<meta>的 viewport 设置用来控制网页的视觉大小。

<meta name="viewport" content="initial-scale=1">

这表示网页初始加载不进行放大或缩小。

下面代码指定网页适配的视口宽度。

<meta name="viewport" content="width=320">

下面代码指定网页宽度为设备宽度。

<meta name="viewport" content="width=device-width">

下面代码指定用户不能放大网页。

<meta name="viewport" content="maximum-scale=1">

适用手机的网页，一般要写成下面这样。

<meta name="viewport" content="width=device-width, initial-scale=1">