saqqdy / postmessager

iframe postmessage通信整体方案

postmessager

这是一个 iframe postmessage 通信整体方案

完整文档请查阅： API 完整文档

介绍

postmessager

安装教程

# 通过npm安装
npm install --save postmessager
# 或者通过yarn安装
yarn add postmessager

通过 import 引入模块的方式

// 在你的.vue或者main.js里面写上import
import PostMessager from 'postmessager'

使用文件引入的方式

1. 通过 require 引入

   // 在你的main.js文件里面加上下面这一行
   const PostMessager = require('postmessager')

2. html 静态页直接使用

   <!-- 在你的html代码上加上script标签，使用CDN链接引入 -->
   <script src="https://unpkg.com/postmessager@latest/dist/index.min.js"></script>

使用

1. 在 vue 中使用

<script>
import PostMessager from 'postmessager'

export default {
    data() {
        return {
            messager: null
        }
    },
    created() {
        this.messager = new PostMessager(this, 'invokeCustomEvent')
        this.messager.subscribe('getQuery', this.getQuery)
    },
    methods: {
        getQuery(data) {
            console.log(data)
        }
    }
}
</script>

2. js 项目中使用

const messager = new PostMessager()
messager.subscribe('getQuery', getQuery)
messager.postMessageUp('actionName', {})
messager.postMessageDown('iframeName', 'actionName', {})

function getQuery(data) {
    console.log(data)
}

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

我的相关

• 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
• 我的 Github：https://github.com/saqqdy
• 我的 npm：https://npmjs.com/~saqqdy
• 我的个人网站 http://www.saqqdy.com