掌握Javascript postMessage: iframe加载与数据传递

资源摘要信息:"NJLibrary-postMessage: Javascript postMessage" 知识点一：Javascript postMessage Javascript postMessage是一种在不同源之间安全通信的方式，主要用于跨文档消息传输（Cross Document Messaging）。在HTML5中，postMessage为window对象提供了一个send方法，允许一个窗口向另一个窗口发送信息。这种方法特别适用于父子iframe结构，允许父窗口和iframe之间传递数据。 知识点二：使用postMessage的场景 1.iframe与父页面之间的通信 2.跨域数据交互 3.两个不同源的页面之间的消息传递 知识点三：postMessage的基本用法 在父级窗口中，可以通过postMessage方法向iframe发送数据，前提是iframe已经在父窗口中加载。在iframe标签中设置onload事件，当iframe加载完毕时，触发一个方法来表示已经加载完成。示例代码如下： ```html <iframe id="i_frame" src="..." onload="nj(this).loaded()"> </iframe> ``` 知识点四：postMessage的参数 1.目标源：一个Window对象或URL，表示消息接收者。在调用postMessage方法时需要明确指定接收消息的窗口源。 2.消息内容：可以是任何数据类型，包括字符串、数字、对象等等。 知识点五：在iframe中接收数据 在iframe加载完成后，可以接收来自父窗口的消息。消息处理通常需要一个事件监听器，使用window.addEventListener来监听message事件。示例代码如下： ```javascript window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { //处理接收到的消息 } ``` 知识点六：身份验证和数据传输 在实际应用中，通常需要对消息进行身份验证，以确保数据的安全性。可以通过发送和接收消息时包含一个验证信息，比如一个key，来验证消息是否来自正确的源。 知识点七：NJLibrary-postMessage NJLibrary-postMessage是一个封装好的库，用于简化postMessage的使用。通过NJLibrary-postMessage，开发者可以更简单地管理iframe和父页面之间的通信，其中包括加载方法的添加和调用方法的发布。 知识点八：使用NJLibrary-postMessage的方法 1.在父级窗口使用nj库对iframe进行操作： ```javascript nj("#i_frame").call({ 'auth' : { 'key' : '123' }, 'data' : { 'item' : '123' } }); ``` 2.在iframe中加载完成后，使用nj库接收数据和进行身份验证： ```javascript nj(this).loaded(); ``` 然后在iframe中使用相应的回调函数处理数据。 知识点九：安全性 使用postMessage进行跨源通信时，安全性是非常重要的考虑。开发者应该确保发送和接收消息时，只接受来自可信源的消息。此外，验证身份的方式也需要足够复杂，以防止身份伪造和其他安全威胁。 知识点十：性能优化 当使用postMessage时，为了保持应用性能，需要谨慎处理大量的数据传输和消息事件。避免不必要的消息监听和数据处理可以提升页面的响应速度和用户体验。 总结来说，Javascript中的postMessage提供了丰富的API来实现父子iframe或不同源页面之间的安全通信。使用NJLibrary-postMessage这样的库可以进一步简化其使用，但开发者需要了解其工作原理和最佳实践来保证开发的应用安全、高效。