一、H5中的跨页面传递数据：
- postMessage 方法介绍、如何接收数据（监听message事件及其属性介绍）
// 执行如下代码, 其他window可以监听分发的message:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
var origin = event.origin
if (origin !== "http://example.org:8080") return;
// ...
}
message 的属性有:
（1）data：从其他 window 中传递过来的对象。
（2）origin：调用 postMessage 时消息发送方窗口的 origin。
这个字符串由 协议、域名、“ : 端口号”拼接而成。例如 “https://example.org (隐含端口 443)”、“http://example.net (隐含端口 80)”、“http://example.com:8080”。
请注意，这个origin不能保证是该窗口的当前或未来origin，因为postMessage被调用后可能被导航到不同的位置。
（3）source：对发送消息的窗口对象的引用，您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
（4）type: 指的是发送消息的类型;
event 对象的打印结果截图如下：
3、安全问题
如果您不希望从其他网站接收message，请不要为message事件添加任何事件侦听器。 这是一个完全万无一失的方式来避免安全问题。
如果您确实希望从其他网站接收message，请始终使用origin和source属性验证发件人的身份。 任何窗口（包括例如http://evil.example.com）都可以向任何其他窗口发送消息，并且您不能保证未知发件人不会发送恶意消息。 但是，验证身份后，您仍然应该始终验证接收到的消息的语法。 否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。
当您使用postMessage将数据发送到其他窗口时，始终指定精确的目标origin，而不是*。 恶意网站可以在您不知情的情况下更改窗口的位置，因此它可以拦截使用postMessage发送的数据。
二、JavaScript的异常处理：
JavaScript中的异常是指程序运行时发生的错误或者异常情况。JavaScript提供了异常处理的机制，可以帮助开发者捕获和处理异常。
异常处理的基本结构如下：
try {
// 可能会抛出异常的代码块
} catch (error) {
// 处理异常的代码块
} finally {
// 无论是否发生异常都会执行的代码块
}
在try块中编写可能会抛出异常的代码，如果发生异常，程序会立即跳转到catch块中执行异常处理代码。finally块中的代码无论是否发生异常都会执行。
常见的JavaScript异常类型包括TypeError、ReferenceError、SyntaxError等。可以使用console.error方法打印异常信息到控制台。
三、ES6的类：
ES6（ECMAScript 2015）是JavaScript的最新版本，引入了类的语法。ES6类是基于原型的继承模型的语法糖，使得JavaScript的面向对象编程更加方便和直观。
以下是一个简单的ES6类的示例：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
在上面的代码中，Person是一个类，它有一个构造函数constructor，用于初始化对象的属性。类中还可以定义其他方法，如sayHello。可以通过new关键字创建类的实例对象，并调用对象的方法。例如：
const person1 = new Person('Alice', 20);
person1.sayHello(); // 输出：Hello, my name is Alice and I am 20 years old.
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://ntvu.love/?p=229
