跨页面沟通有多重要？五大主流方式速览，让面试官刮目相看

2023-06-03 16:12:30

跨页面通信：提升用户体验和开发效率

跨页面通信的必要性

在当今快节奏的互联网世界中，跨页面通信已成为构建流畅、互动式网络体验的基石。它使不同页面之间的数据共享和交互成为可能，极大地提升了用户体验和开发效率。

增强用户体验： 跨页面通信允许用户在不同页面间无缝传递数据，从而提供更直观、更人性化的体验。例如，在线购物网站上的用户可以在浏览商品时将物品添加到购物车，无需重新加载页面。
提高开发效率： 通过减少重复代码，跨页面通信极大地提高了开发效率。例如，利用AJAX进行异步数据加载时，可通过跨页面通信将数据传递给其他页面，无需重写代码。
增强网站安全性： 跨页面通信还可以通过防止跨站脚本攻击（XSS）来增强网站安全性。例如，通过使用postMessage方法进行跨页面通信，可限制恶意脚本的传播。

主流跨页面通信方式

1. postMessage

postMessage方法是HTML5中引入的一种跨页面通信方式，允许不同页面之间直接通信。使用postMessage方法进行通信时，需要指定目标页面和要传递的数据，目标页面可以使用addEventListener方法监听postMessage事件，并对数据进行处理。

示例：

// 发送消息的页面
const targetPage = window.open("target-page.html");
targetPage.postMessage("Hello from the sending page!", "*");

// 接收消息的页面
window.addEventListener("message", (event) => {
  const message = event.data;
  console.log(`Received message: ${message}`);
});

2. window.opener

window.opener属性可访问打开当前页面的页面，可用于实现跨页面通信。例如，可以使用window.opener.document.write()方法向打开当前页面的页面写入HTML代码。但是，此方法仅适用于同源页面之间的通信。

示例：

// 在新窗口中打开一个页面
const newWindow = window.open("new-page.html");

// 在新窗口中写入 HTML
newWindow.opener.document.write("<h1>Hello from the opener!</h1>");

3. localStorage

localStorage对象是一个存储在浏览器中的本地存储，可用于不同页面之间存储数据。localStorage对象中的数据不会随着页面的刷新或关闭而丢失，因此非常适合存储需要长期保存的数据，如用户设置和偏好。

示例：

// 设置一个 localStorage 项
localStorage.setItem("user_name", "John Doe");

// 获取一个 localStorage 项
const userName = localStorage.getItem("user_name");

4. sessionStorage

sessionStorage对象类似于localStorage对象，但sessionStorage中的数据会随着页面的关闭而丢失。sessionStorage对象非常适合存储临时数据，如购物车中的商品。

示例：

// 设置一个 sessionStorage 项
sessionStorage.setItem("cart_items", JSON.stringify(["Apple", "Orange", "Banana"]));

// 获取一个 sessionStorage 项
const cartItems = JSON.parse(sessionStorage.getItem("cart_items"));

5. IndexedDB

IndexedDB是一个用于存储大量结构化数据的API，可存储文本、数字、二进制数据等各种类型的数据。IndexedDB对象可用于不同页面之间存储数据，但需要注意的是，IndexedDB对象中的数据不会随着页面的刷新或关闭而丢失，因此需要谨慎使用。

示例：

// 打开 IndexedDB 数据库
const db = indexedDB.open("my_database");

// 创建一个对象存储
db.onupgradeneeded = (event) => {
  const objectStore = event.target.result.createObjectStore("users", { keyPath: "id" });
};

// 添加数据到对象存储
db.onsuccess = (event) => {
  const transaction = event.target.result.transaction("users", "readwrite");
  transaction.objectStore("users").add({ id: 1, name: "John Doe" });
};

// 获取数据从对象存储
db.onsuccess = (event) => {
  const transaction = event.target.result.transaction("users", "readonly");
  const objectStore = transaction.objectStore("users");
  const request = objectStore.get(1);
  request.onsuccess = (event) => {
    const user = event.target.result;
    console.log(`User: ${user.name}`);
  };
};

解决跨域通信问题

跨页面通信经常遇到的一个挑战是跨域通信问题。跨域通信是指不同域名的页面之间的通信，由于浏览器的同源策略，跨域通信受到限制。解决跨域通信问题的方法有以下几种：

CORS

CORS（跨域资源共享）是一种允许不同域名的页面进行通信的机制，通过设置HTTP头来实现。使用CORS时，需要在服务端设置Access-Control-Allow-Origin头来指定允许跨域通信的域名。

示例：

// 服务端代码
header("Access-Control-Allow-Origin: *"); // 允许来自所有域名的跨域请求

JSONP

JSONP（JSON with Padding）是一种利用<script>标签加载跨域资源的技巧，通过在URL中添加一个回调函数名来实现跨域通信。使用JSONP时，需要在服务端提供一个JSONP接口，并指定回调函数名。

示例：

// 服务端代码
echo json_encode(["name" => "John Doe"]); // 提供 JSONP 接口

// 客户端代码
const script = document.createElement("script");
script.src = `https://example.com/jsonp.php?callback=myCallback`;
document.body.appendChild(script);

// 回调函数
function myCallback(data) {
  console.log(`User: ${data.name}`);
}

WebSockets

WebSockets是一种双向的、全双工的通信协议，允许客户端和服务器之间建立持久连接。WebSockets可以使用WSS协议（安全WebSockets）来实现加密通信。

示例：

// 创建 WebSocket 连接
const ws = new WebSocket("wss://example.com/websocket");

// 发送消息
ws.send("Hello from the client!");

// 接收消息
ws.onmessage = (event) => {
  const message = event.data;
  console.log(`Received message: ${message}`);
};

Server-Sent Events

Server-Sent Events（服务器端事件）是一种允许服务器向客户端推送事件的机制，通过HTTP长连接来实现。使用Server-Sent Events时，需要在服务端使用SSE API来发送事件，客户端可以使用EventSource对象来监听事件。

示例：

// 服务端代码
header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");

// 客户端代码
const eventSource = new EventSource("https://example.com/sse");

eventSource.addEventListener("message", (event) => {
  const data = event.data;
  console.log(`Received event: ${data}`);
});

长轮询

长轮询是一种模拟服务器推送事件的技术，通过不断向服务器发送请求来获取最新数据。使用长轮询时，需要在服务端使用长轮询API来处理请求，客户端可以使用AJAX技术来发送请求。

示例：

// 服务端代码
while (true) {
  // 处理请求并返回数据
}

// 客户端代码
const request = new XMLHttpRequest();
request.open("POST", "https://example.com/longpoll");

request.addEventListener("load", () => {
  const data = request.responseText;
  console.log(`Received data: ${data}`);

  // 重新发送请求
  request.send();
});

request.send();