Web Storage

一、 简介 浏览器本地存储是指浏览器提供的一种机制,允许 Web 应用程序在浏览器端存储数据,以便在用户下次访问时可以快速获取和使用这些数据。一共两种存储方式:localStorage 和 sessionStorage。下面介绍下两种缓存的特性和在内部平台的一些应用。 二、localStorage 和 sessionStorage 2.1、区别 localStorage 和 sessionStorage 的主要区别是生命周期,具体区别如下: localStorage sessionStorage 生命周期 持久化存储:除非自行删除或清除缓存,否则一直存在 会话级别的存储:浏览器标签页或窗口关闭 作用域 相同浏览器,同域名,不同标签,不同窗口 相同浏览器,同域名,同源窗口 获取方式 window.localStorage window.sessionStorage 存储容量 5M 5M 容量限制的目的是防止滥用本地存储空间,导致用户浏览器变慢。 2.2、浏览器兼容性 1)现在的浏览器基本上都是支持这两种 Storage 特性的。各浏览器支持版本如下: Chrome Firefox IE Opera Safari Android Opera Mobile Safari Mobile localStorage 4 3.5 8 10.5 4 2.1 11 iOS 3.2 sessionStorage 5 2 8 10.5 4 2.1 11 iOS 3.2 2)如果使用的是老式浏览器,比如Internet Explorer 6、7 或者其他,就需要在使用前检测浏览器是否支持本地存储或者是否被禁用。以 localStorage 为例: ...

October 9, 2024

跨域通信

什么是跨域 在了解跨域之前,我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。 同源策略 同源策略限制了从同一个源加载的文档或脚本如何与另一个源的资源进行交互。这是浏览器的一个用于隔离潜在恶意文件的重要的安全机制。同源指的是:协议、端口号、域名必须一致。 跨源资源共享([CORS],或通俗地译为跨域资源共享)是一种基于 [HTTP] 头的机制,该机制通过允许服务器标示除了它自己以外的其他[源] (域、协议或端口),使得浏览器允许这些源访问加载自己的资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求,该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中,浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。 为什么会产生跨域 下表给出了与 URL wmq.com/dir/page.ht… 的源进行对比的示例: URL 是否跨域 原因 wmq.com/dir/page.ht… 同源 完全相同 wmq.com/dir/inner/a… 同源 只有路径不同 wmq.com/secure.html 跨域 协议不同 wmq.com:81/dir/etc.htm… 跨域 端口不同 ( http:// 默认端口是80) news.company.com/dir/other.h… 跨域 主机不同 同源策略:protocol(协议)、domain(域名)、port(端口)三者必须一致。 同源政策主要限制了三个方面: 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。 当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。 当前域下 ajax 无法发送跨域请求。 源政策的目的主要是为了保证用户的信息安全,它只是对 js 脚本的一种限制,并不是对浏览器的限制,对于一般的 img、或者script 脚本请求都不会有跨域的限制,这是因为这些操作都不会通过响应结果来进行可能出现安全问题的操作。 有哪些解决跨域的办法 CORS CORS: 通过设置服务器端的响应头来允许跨域请求。这需要在服务器端进行配置,以允许特定的来源访问资源。例如,在Node.js的Express框架中,可以使用以下代码来设置CORS: const express = require('express'); const app = express(); app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); // 允许所有来源访问 res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); // 允许的请求头 res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); // 允许的请求方法 next(); }); // 其他路由和中间件 app.listen(3000, () => { console.log('Server is running on port 3000'); }); 减少OPTIONS请求次数 在跨域请求中,浏览器会自动处理一些非简单请求的预检流程,这包括"预检请求"(也被称为CORS预检请求)和"OPTIONS请求"。预检请求是发起一个HTTP OPTIONS请求到服务器,以确认目标资源是否支持跨域。这种机制是为了兼容同源策略而产生的,但有时这种额外的请求会导致性能问题。 ...

October 14, 2024

表单验证

HTML 表单是用于收集用户输入数据的重要元素,通常用于提交到服务器进行处理。它包括一系列控件,如文本输入框、按钮、复选框、单选按钮、文件上传等。表单通过 form 标签定义,用户可以通过这些控件与网页进行交互。 1. 基础结构 表单通过 <form> 标签创建,表单的 action 属性定义数据提交的目标 URL,method 属性定义提交方式(如 GET 或 POST)。 <form action="/submit" method="POST"> <input type="text" name="username"> <input type="submit" value="Submit"> </form> 2. 表单控件 HTML 表单提供了多种用户输入控件: 文本输入 (<input type="text">, <textarea>) 密码输入 (<input type="password">) 单选框和复选框 (<input type="radio">, <input type="checkbox">) 下拉列表 (<select>) 按钮 (<button>, <input type="submit">) 文件上传 (<input type="file">) 隐藏输入 (<input type="hidden">) 3. 表单的属性 action:指定表单数据提交到的 URL。 method:定义提交方式,常用 GET(将数据附在 URL 后)和 POST(将数据放入 HTTP 请求体中)。 enctype:指定数据的编码类型,常用于文件上传(如 multipart/form-data)。 autocomplete:启用或禁用浏览器的自动完成功能。 4. 表单校验 HTML5 引入了许多新的表单校验功能,能够减少 JavaScript 校验代码的复杂度。校验功能包括: ...

October 14, 2024

实体字符(转义字符)

HTML 的实体字符(HTML Entities)是用于显示某些特殊字符或符号的编码形式。 HTML 中某些符号具有特殊含义,例如 <, >, & 等字符不能直接在网页内容中使用,所以需要使用实体字符来表示它们。 常见的 HTML 实体字符 空格和控制字符 &nbsp;:空格字符 (non-breaking space) &nbsp; <!-- 表示一个空格 --> &lt;:小于号 < &lt;div&gt; <!-- 表示 <div> --> &gt;:大于号 > &gt;/div&gt; <!-- 表示 </div> --> &amp;:与符号 & &amp; <!-- 表示 & --> &quot;:双引号 " &quot;Hello&quot; <!-- 表示 "Hello" --> &apos;:单引号 ' &apos;Hello&apos; <!-- 表示 'Hello' --> 数学符号 &plus;:加号 + &minus;:减号 − &times;:乘号 × &divide;:除号 ÷ 货币符号 &dollar;:美元符号 $ &euro;:欧元符号 € &pound;:英镑符号 £ &yen;:日元符号 ¥ 其他常见符号 &copy;:版权符号 © &reg;:注册商标符号 ® &trade;:商标符号 ™ &sect;:章节符号 § &deg;:度数符号 ° 希腊字母 &alpha;:α &beta;:β &gamma;:γ &delta;:δ 为什么需要实体字符? 避免 HTML 解析冲突:例如 <, >, & 等符号在 HTML 中有特定的用途,用实体字符可以避免冲突。 显示特殊符号:例如版权符号、商标符号或货币符号等,不能直接在键盘上输入,使用实体字符可以确保正确显示。 常见考点 1. HTML 实体字符的定义与作用 什么是 HTML 实体字符?为什么需要使用它们? 实体字符用于在 HTML 中显示特殊符号(如 <, >, &, " 等)或不可见字符(如空格 、换行符等),避免与 HTML 语法冲突。 2. 常见的 HTML 实体字符 &lt;:小于号 < &gt;:大于号 > &amp;:与符号 & &quot;:双引号 " &apos;:单引号 ' &nbsp;:不间断空格 3. Unicode 和 ASCII 编码的实体字符 HTML 支持通过 &#xNNNN;(十六进制)或 &#NNNN;(十进制)表示 Unicode 字符。例如: &#x2665; 或 &#9829; 表示 ♥ 考察点可能涉及通过实体字符显示 Unicode 表情符号、语言字符等。 4. 转义字符 在 HTML 中如何使用实体字符进行转义? 为什么需要转义符号(如 <, >, &)?特别是在 HTML 元素内嵌 JavaScript 或样式时需要避免歧义。 安全性方面的考量,尤其是防止 XSS(跨站脚本攻击)。 5. 空白字符 &nbsp;(不间断空格):防止自动换行或保留多个空格。 &ensp; 和 **&emsp;**:半角和全角空格符号。 实体空白符在排版和布局中的应用(如对齐、占位)。 6. 其他常见实体字符 货币符号:如 &yen;(¥)、&euro;(€)。 数学符号:如 &plusmn;(±)、&times;(×)、&divide;(÷)。 特殊符号:如 &copy;(©)、&reg;(®)、&trade;(™)。 7. HTML5 实体字符扩展 HTML5 中新增的一些实体字符,如: **&le;**(≤)和 &ge;(≥) &bull;(•)用于列表符号 &hellip;(…)省略号 8. 实体字符与浏览器兼容性 浏览器如何处理不支持的实体字符? 考察点可能涉及浏览器对不同编码的支持,以及如何确保兼容性。 9. HTML 实体字符与国际化 如何通过实体字符支持多语言文本? 考察 Unicode 与实体字符在国际化中的应用,如如何使用实体字符表示非 ASCII 字符。 10. HTML 实体字符在输入表单中的应用 在表单中,如何防止特殊字符输入导致 HTML 注入攻击? 使用实体字符保护表单数据的完整性和安全性。

October 15, 2024

离线存储

HTML5 离线存储是指通过 Web Storage API 提供的一种在客户端本地存储数据的机制,主要有两种方式:localStorage 和 sessionStorage。与传统的 Cookie 相比,Web Storage 提供了更大容量、灵活性,并且数据不会随着 HTTP 请求自动发送到服务器,这可以优化性能和安全性。此外,HTML5 还支持 离线应用缓存(Application Cache) 和 IndexedDB,用于更加复杂的数据存储需求和离线应用。 工作原理 HTML5 的离线存储主要通过以下几个机制来实现数据存储和访问: localStorage:一种持久性存储机制,数据存储在用户的浏览器中,即使关闭浏览器或重新加载页面,数据也不会丢失,除非明确被删除。其特点是跨页面、跨会话存储数据。 sessionStorage:会话级别的存储机制,只在当前页面的会话期间有效。当会话结束或浏览器窗口关闭时,数据会自动删除。其特点是只能在当前窗口或标签页中存储数据,不能跨窗口或标签页共享。 Application Cache(已被 Service Worker 替代):允许开发者将网站的某些资源缓存到本地,使得用户即使在离线的情况下也能访问特定页面。虽然该机制已被弃用,但它曾经是实现离线访问的核心。 IndexedDB:一种更为复杂的浏览器内置数据库,支持存储结构化数据,如对象和文件。它适用于更大规模的数据存储需求,并且允许通过索引进行高效的查询和数据操作。 使用方式 1. localStorage 特点:持久性存储,浏览器关闭后数据依然存在,除非手动清除。 使用方式: // 存储数据 localStorage.setItem('key', 'value'); // 获取数据 let value = localStorage.getItem('key'); // 删除数据 localStorage.removeItem('key'); // 清空所有 localStorage localStorage.clear(); 2. sessionStorage 特点:仅在当前会话期间有效,浏览器关闭或页面重新加载后数据会被清除。 使用方式: // 存储数据 sessionStorage.setItem('sessionKey', 'sessionValue'); // 获取数据 let sessionValue = sessionStorage.getItem('sessionKey'); // 删除数据 sessionStorage.removeItem('sessionKey'); // 清空所有 sessionStorage sessionStorage.clear(); 3. IndexedDB 特点:适合存储大量的结构化数据,支持异步 API 和事务。 使用方式: IndexedDB 的使用较为复杂,通常涉及打开数据库、创建事务、存储和检索数据等操作。一个简单的示例如下: let request = indexedDB.open('myDatabase', 1); request.onupgradeneeded = function(event) { let db = event.target.result; let objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' }); }; request.onsuccess = function(event) { let db = event.target.result; let transaction = db.transaction(['myObjectStore'], 'readwrite'); let objectStore = transaction.objectStore('myObjectStore'); objectStore.add({ id: 1, name: 'John Doe' }); }; 4. Application Cache(弃用) 特点:通过 manifest 文件指定需要缓存的资源,允许在离线时访问应用。 使用方式: 在 HTML 文档中指定 manifest 文件: <html manifest="app.manifest"> 然后在 app.manifest 文件中列出需要缓存的资源: ...

October 16, 2024

Web Workers

在浏览器和服务器上,JavaScript程序在单个处理线程上运行。这意味着程序一次只能做一件事。简单来说,你的新电脑可能有32核的CPU,但当JavaScript应用程序运行时,其中31个核心都处于空闲状态。 JavaScript的单线程避免了复杂的并发情况。如果两个线程同时尝试进行不兼容的更改会发生什么?例如,一个浏览器可能在另一个线程重定向到新的URL并从内存中清除该文档时正在更新DOM。Node.js、Deno和Bun都继承了浏览器的单线程引擎。 这不是JavaScript特定的限制。大多数语言都是单线程的,但像PHP和Python这样的Web选项通常在Web服务器上运行,为每个用户请求启动解释器的新线程的不同实例。这会消耗资源,因此Node.js应用程序通常定义自己的Web服务器,该服务器在单个线程上运行,并异步处理每个传入的请求。 Node.js的方法在处理高流量负载时可能更高效,但长时间运行的JavaScript函数会消耗效率收益。 在我们演示如何使用Web Workers解决执行速度问题之前,我们首先要了解JavaScript的运行方式以及为什么长时间运行的函数会引发问题。 JavaScript非阻塞I/O事件循环 你可能会认为一次只做一件事会导致性能瓶颈,但JavaScript是异步的,这就避免了大部分单线程处理问题,因为: 不需要等待用户在网页上点击按钮。 浏览器触发一个事件,当点击发生时调用JavaScript函数。 不需要等待Ajax请求的响应。 浏览器触发一个事件,在服务器返回数据时调用JavaScript函数。 Node.js应用程序不需要等待数据库查询的结果。 运行时在数据可用时调用JavaScript函数。 JavaScript引擎运行一个事件循环。一旦代码的最后一条语句执行完毕,运行时会循环回来,检查是否有未完成的定时器、待处理的回调函数和数据连接,然后根据需要执行回调函数。 其他操作系统处理线程负责调用诸如HTTP请求、文件处理和数据库连接等输入/输出系统。它们不会阻塞事件循环。事件循环可以继续执行下一个在队列中等待的JavaScript函数。 实质上,JavaScript引擎的主要责任是运行JavaScript代码。操作系统处理所有其他可能导致引擎调用JavaScript函数的I/O操作。 长时间运行的JavaScript函数 JavaScript函数通常由事件触发。它们会进行一些处理,输出一些数据,并且大部分情况下会在毫秒级别内完成,以便事件循环可以继续运行。 不幸的是,一些长时间运行的函数可能会阻塞事件循环。想象一下,你正在开发自己的图像处理函数(如锐化、模糊、灰度化等)。异步代码可以从文件中读取(或写入)数百万字节的像素数据,这对JavaScript引擎影响很小。然而,处理图像的JavaScript代码可能需要几秒钟来计算每个像素。该函数会阻塞事件循环,直到它完成,其他JavaScript代码无法运行。 在浏览器中,用户将无法与页面进行交互。他们无法点击、滚动或输入,并且可能会看到一个“脚本无响应”的错误,其中有停止处理的选项。 对于Node.js服务器应用程序而言,情况更糟糕。在函数执行时,它无法响应其他请求。如果函数需要花费10秒钟来完成,那么在那个时间点访问的每个用户都必须等待最多10秒钟,即使他们没有处理图像。 你可以通过将计算拆分为较小的子任务来解决这个问题。下面的代码使用传递的imageFn函数,最多处理1,000个像素(从一个数组中)。然后,它使用1毫秒的setTimeout延迟调用自身。事件循环的阻塞时间较短,这样JavaScript引擎可以在迭代之间处理其他传入的事件: // pass callback function, image processing function, and input image // return an output image to a callback function function processImage( callback, imageFn = i => {}, imageIn = [] ) { const chunkSize = 1000; // pixels to process per iteration // process first chunk let imageOut = [], pointer = 0; processChunk(); // process a chunk of data function processChunk() { const pointerEnd = pointer + chunkSize; // pass chunk to image processing function imageOut = imageOut.concat( imageFn( imageIn.slice( pointer, pointerEnd ) ) ); if (pointerEnd < imageIn.length) { // process next chunk after a short delay pointer = pointerEnd; setTimeout(processChunk, 1); } else if (callback) { // complete - return output image to callback function callback( null, imageOut ); } } } 这种方法可以防止脚本无响应,但不总是切实可行的。单个执行线程仍然会执行所有的工作,即使CPU可能有更多的处理能力。为了解决这个问题,我们可以使用Web Workers。 ...

October 16, 2024

地理定位

HTML5 提供了地理定位(Geolocation)API,用于获取用户的当前位置。通过这一功能,网页可以访问用户的地理位置信息,进而实现如地图服务、定位推荐、基于位置的广告等功能。该 API 主要依赖设备的 GPS、Wi-Fi、IP 地址、蓝牙等信息来确定位置。 Geolocation API 的基本用法 主要通过 navigator.geolocation 对象来访问地理位置信息,提供了以下三个方法: getCurrentPosition(success, error, options) 获取用户的当前位置,一次性返回位置信息。 watchPosition(success, error, options) 持续监听用户的位置变化,并且实时返回新的位置信息。 clearWatch(id) 取消 watchPosition 监听的位置变化。 方法的参数说明 success(position):成功获取位置时的回调函数。position 对象包含位置信息,如经度、纬度、速度等。 error(error):可选参数,获取位置失败时的回调函数。error 对象包含错误信息,如用户拒绝提供位置或获取超时等。 options:可选参数,包含配置选项,影响获取位置的精度、超时时间等。 使用示例 if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const latitude = position.coords.latitude; const longitude = position.coords.longitude; console.log(`Latitude: ${latitude}, Longitude: ${longitude}`); }, (error) => { console.error(`Error Code = ${error.code}: ${error.message}`); }, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 } ); } else { console.log("Geolocation is not supported by this browser."); } 获取到的 position 对象 position 对象包含用户的位置信息,主要属性包括: ...

October 16, 2024

拖放API

HTML5 中的拖拽(Drag and Drop,简称 DnD)功能为网页元素提供了原生的拖放支持。通过 HTML5 的拖放 API,开发者可以让元素变得可拖动,并实现拖拽和释放的交互效果。 HTML5 拖拽的基本原理 HTML5 拖拽操作的核心是 dragstart、dragover 和 drop 等事件。以下是拖拽的工作流程: 可拖动元素:使用 draggable="true" 使一个元素可被拖拽。 源元素触发拖拽:当用户点击并开始拖动可拖动元素时,触发 dragstart 事件。 拖拽中:拖拽过程中,目标区域会触发 dragover 事件。 释放元素:当用户释放被拖动的元素到目标区域时,目标会触发 drop 事件。 实现步骤 设置拖拽元素:使用 draggable="true" 使 HTML 元素可拖动。 监听拖拽事件: dragstart:当拖拽开始时触发。 dragover:在拖拽过程中,拖动到可放置目标区域时持续触发。 drop:当拖动的元素被释放到目标区域时触发。 阻止默认行为:dragover 和 drop 事件默认情况下是禁止的,需要使用 event.preventDefault() 来阻止默认行为,从而允许放置元素。 拖拽的相关事件 dragstart:在拖动开始时触发,用来设置拖动数据(如拖动的数据类型和数据内容)。 dragend:拖动操作结束时触发,可以用来清理状态。 dragenter:当拖动的元素进入目标区域时触发。 dragover:当拖动元素在目标区域上方移动时持续触发,默认情况下不会触发 drop,因此需要通过 event.preventDefault() 来允许放置。 dragleave:当拖动的元素离开目标区域时触发。 drop:当拖动的元素释放到目标区域时触发,可以获取拖动的数据。 拖拽实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 拖拽示例</title> <style> #dragElement { width: 100px; height: 100px; background-color: lightcoral; text-align: center; line-height: 100px; cursor: grab; } #dropZone { width: 200px; height: 200px; background-color: lightblue; margin-top: 20px; text-align: center; line-height: 200px; } </style> </head> <body> <div id="dragElement" draggable="true">拖拽我</div> <div id="dropZone">放置到这里</div> <script> // 获取元素 const dragElement = document.getElementById('dragElement'); const dropZone = document.getElementById('dropZone'); // 拖拽开始事件 dragElement.addEventListener('dragstart', function(event) { // 设置数据,类型和内容 event.dataTransfer.setData('text', event.target.id); }); // 拖拽过程中在目标上方移动时,必须阻止默认行为 dropZone.addEventListener('dragover', function(event) { event.preventDefault(); }); // 放置事件 dropZone.addEventListener('drop', function(event) { event.preventDefault(); // 阻止默认行为 const data = event.dataTransfer.getData('text'); const draggedElement = document.getElementById(data); event.target.appendChild(draggedElement); // 将拖动的元素放入目标区域 }); </script> </body> </html> 代码说明 拖拽元素:draggable="true" 使得 #dragElement 可拖动。 拖拽开始:dragstart 事件设置了拖拽的元素数据,存入 dataTransfer 对象中。 允许放置:dragover 事件通过 event.preventDefault() 允许拖拽元素放置在目标区域。 放置元素:drop 事件在目标区域中,通过 event.dataTransfer.getData() 获取拖动的数据并进行处理。 常见考点 1. 基本概念与原理 定义:HTML5 提供了内置的拖拽功能,通过 draggable 属性和 Drag and Drop API 实现元素拖放操作。 原理:拖拽功能依赖一系列事件,如 dragstart、drag、dragend、dragover、drop 等来实现拖放操作。 2. 如何启用拖拽 draggable 属性:默认情况下,HTML 元素是不可拖拽的。要启用拖拽,需要设置元素的 draggable="true"。 <div draggable="true">Drag me!</div> 事件绑定:考察点可能包括如何通过 dragstart 等事件处理拖拽行为。 const draggableElement = document.getElementById('draggable'); draggableElement.addEventListener('dragstart', (event) => { event.dataTransfer.setData('text/plain', 'This is a draggable element'); }); 3. Drag and Drop 的核心事件 dragstart:用户开始拖动时触发,通常用于设置拖拽的数据和外观。 drag:在拖动过程中持续触发,可用于动态更新拖拽效果。 dragend:拖动结束时触发,可以用于清除拖拽状态。 dragenter:被拖拽的元素进入可放置区域时触发。 dragover:在拖动元素悬停在放置区域时持续触发,通常需要调用 event.preventDefault() 来允许放置。 dragleave:当拖动元素离开放置区域时触发。 drop:用户放开被拖动的元素时触发,用于处理放置操作。 4. 数据传输 dataTransfer 对象:event.dataTransfer 是拖拽过程中传输数据的关键对象。常见考点包括如何通过 dataTransfer.setData() 和 dataTransfer.getData() 方法在 dragstart 和 drop 事件之间传递数据。 // dragstart 中设置数据 event.dataTransfer.setData('text', 'Dragged Data'); // drop 中获取数据 const data = event.dataTransfer.getData('text'); 传输多种数据类型:考察如何传输不同的数据类型(如文本、URL、文件等)以及如何处理这些数据。 5. dropzone 区域的设置 允许放置元素:默认情况下,放置区域不会接受被拖拽的元素,需要在 dragover 事件中调用 event.preventDefault() 来显式地允许放置操作。 const dropzone = document.getElementById('dropzone'); dropzone.addEventListener('dragover', (event) => { event.preventDefault(); // 允许放置 }); 6. 拖拽的样式处理 自定义拖拽效果:通过 event.dataTransfer.setDragImage() 设置自定义的拖拽图片,考察点可能包括如何替换默认的拖拽预览图。 event.dataTransfer.setDragImage(imageElement, offsetX, offsetY); 拖拽时的 CSS 样式:考察如何使用 CSS 类和事件配合,实现拖拽时的视觉效果。 .dragging { opacity: 0.5; } 7. 跨页面或跨应用的拖拽 跨文档拖拽:考察是否了解如何处理跨 iframe 或浏览器窗口的拖拽。 拖拽文件:用户可以将外部文件(如从桌面拖动文件)拖入浏览器的 dropzone,需要处理 dataTransfer.files 属性。 const files = event.dataTransfer.files; 8. 拖拽与输入法的冲突 在移动设备上,拖拽和触摸事件可能存在冲突,因此考察点可能包括如何处理拖拽在移动端的实现或替代方案。 9. 可访问性 键盘可用性:默认拖拽操作主要依赖鼠标,因此考察点可能包括如何使拖拽操作可通过键盘导航,确保网站的无障碍性。 ARIA 支持:在实现拖拽功能时,如何使用 ARIA 属性为屏幕阅读器用户提供反馈是常见的可访问性考察点。 10. 兼容性 浏览器兼容性:HTML5 拖拽在不同浏览器中的支持情况不一致,尤其是在移动端,考察点可能包括如何处理浏览器兼容性问题,特别是在触摸设备上使用拖拽功能时的挑战。 11. 常见的应用场景 文件上传:通过拖拽文件进行上传是常见的考察场景,如何实现文件的拖放上传功能是常见问题。 可拖拽列表:如何通过拖拽重新排序列表项,如实现类似于 Trello 的拖放功能。 游戏和图形界面:拖放在交互式游戏或图形应用中被广泛使用,可能会考察如何通过拖拽元素实现复杂的交互效果。 12. 事件顺序 了解拖拽过程中的事件触发顺序也是一个重要的考察点,常见顺序为:dragstart -> drag -> dragenter -> dragover -> drop -> dragend。 13. 拖拽的取消 取消拖拽:通过调用 event.preventDefault() 可以阻止某些拖拽事件的默认行为,如取消 drop 事件。 14. 使用 JavaScript 框架实现拖拽 有些前端面试可能会考察如何利用 JavaScript 框架(如 React、Vue、Angular)实现拖拽交互,以及如何处理拖拽相关的状态管理和数据绑定。

October 17, 2024

全屏API

在 HTML 中,可以通过调用浏览器的全屏 API 实现页面或页面中的某个元素全屏显示。全屏 API 是 HTML5 提供的一项功能,允许将元素切换为全屏模式。 使用全屏 API 实现全屏 全屏 API 提供了以下常用方法和属性: requestFullscreen():请求将元素设置为全屏模式。 exitFullscreen():退出全屏模式。 fullscreenElement:返回当前正在全屏显示的 DOM 元素,如果没有元素全屏,则返回 null。 fullscreenchange 事件:当全屏状态发生变化时触发,用来监听进入或退出全屏。 实现全屏的基本步骤 选择你希望全屏的元素。 使用 element.requestFullscreen() 方法来进入全屏。 使用 document.exitFullscreen() 来退出全屏模式。 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全屏示例</title> <style> #fullscreenContent { width: 100px; height: 100px; background-color: lightblue; margin: 50px auto; text-align: center; line-height: 100px; } </style> </head> <body> <div id="fullscreenContent">点击全屏</div> <button id="exitFullscreenBtn" style="display:none;">退出全屏</button> <script> const fullscreenContent = document.getElementById('fullscreenContent'); const exitFullscreenBtn = document.getElementById('exitFullscreenBtn'); // 进入全屏模式 fullscreenContent.addEventListener('click', function() { if (fullscreenContent.requestFullscreen) { fullscreenContent.requestFullscreen(); } else if (fullscreenContent.mozRequestFullScreen) { // Firefox fullscreenContent.mozRequestFullScreen(); } else if (fullscreenContent.webkitRequestFullscreen) { // Chrome, Safari and Opera fullscreenContent.webkitRequestFullscreen(); } else if (fullscreenContent.msRequestFullscreen) { // IE/Edge fullscreenContent.msRequestFullscreen(); } exitFullscreenBtn.style.display = 'inline-block'; }); // 退出全屏模式 exitFullscreenBtn.addEventListener('click', function() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { // Firefox document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { // IE/Edge document.msExitFullscreen(); } exitFullscreenBtn.style.display = 'none'; }); // 监听全屏状态变化 document.addEventListener('fullscreenchange', () => { console.log('全屏状态发生变化'); }); </script> </body> </html> 代码解释 进入全屏:点击 #fullscreenContent 的 div 时,调用 requestFullscreen() 方法使该元素进入全屏模式。 退出全屏:点击按钮 #exitFullscreenBtn,调用 document.exitFullscreen() 退出全屏模式。 跨浏览器兼容性:由于部分浏览器的全屏 API 有不同的实现方法,代码中兼容了各个主流浏览器的实现(例如 Chrome, Firefox, Safari, Edge)。 监听全屏状态变化:使用 fullscreenchange 事件来监听当前全屏模式的变化,可以在进入或退出全屏时执行额外操作。 全屏 API 的一些注意事项 全屏 API 只能在用户交互(如点击或按键事件)后触发,不能通过脚本自动进入全屏模式,这是为了防止用户体验被打断。 不同浏览器的全屏 API 实现可能稍有不同,因此通常需要做一些兼容性处理。 在移动端设备上,全屏模式的行为可能与桌面端有所不同。 总结 HTML5 的全屏 API 提供了一种简单而直观的方法来让页面或元素进入全屏模式。通过 requestFullscreen() 方法可以将任意元素全屏显示,exitFullscreen() 则用来退出全屏模式。结合 fullscreenchange 事件可以对全屏状态进行监控,实现更加丰富的交互体验。 ...

October 17, 2024

与 CSS/JS 的交互

HTML、CSS 和 JavaScript 是前端开发的三大基础技术,它们通过不同的方式相互作用,创建交互性良好的网页。 1. HTML 与 CSS 的交互 HTML 负责定义网页的结构,而 CSS 则负责美化这些结构元素。两者的交互主要通过以下方式: <style> 标签:直接在 HTML 中嵌入 CSS 样式。 这种方式将 CSS 写入到 HTML 文件中,但不推荐用于大型项目,因为这会导致样式与结构混杂在一起。 <style> h1 { color: red; } </style> <link> 标签:通过 <link> 标签引入外部 CSS 文件。 这种方式通常用于大型项目中,将样式与结构分离,维护更加清晰。 <link rel="stylesheet" href="styles.css"> 内联样式:直接将样式属性写在 HTML 标签内。 这种方式适合临时的小改动,但不推荐频繁使用,尤其在大型项目中不利于维护。 <h1 style="color: blue;">这是一个标题</h1> 2. HTML 与 JavaScript 的交互 JavaScript 负责操作和控制网页内容,主要与 HTML 进行交互以实现动态效果。以下是交互方式: <script> 标签:通过 <script> 标签直接在 HTML 中嵌入 JavaScript 代码。 此方法会在 HTML 中直接执行 JavaScript,适合小规模的脚本。 <script> alert('这是一个弹窗'); </script> 外部 JavaScript 文件:通过 <script> 标签引入外部 JavaScript 文件。 这种方式将 JavaScript 逻辑与 HTML 分离,便于维护和重用。 <script src="script.js"></script> DOM 操作:通过 JavaScript 操作 DOM(文档对象模型),动态更改 HTML 元素的内容和属性。例如: <p id="text">这是原始文本</p> <script> document.getElementById('text').innerText = '这是通过 JS 改变的文本'; </script> 事件监听:JavaScript 可以通过事件监听器响应用户的交互。例如: <button id="btn">点击我</button> <script> document.getElementById('btn').addEventListener('click', function() { alert('按钮被点击了'); }); </script> 3. CSS 与 JavaScript 的交互 JavaScript 也可以与 CSS 进行交互,动态地控制页面的样式。常见的方法有: ...

October 17, 2024