# H5父子页面传递数据和方法通用组件

**Repository Path**: snakes/pageTransfer

## Basic Information

- **Project Name**: H5父子页面传递数据和方法通用组件
- **Description**: html 中，父页面嵌套iframe子页面的时候，常需要传递数据，方法回调，
这里封装了通用组件，方便自定义方法，注意，所有的方法都是异步回调的，并不处理返回值

使用时，需要调整一下页面的js，父子页面可以自由跨域

父页面：
 * ParentPage(parentid)
 1.维护多个子页面和它们的服务列表
 2.注册服务，等待被子页面调用，可被子页面调用此服务
 3.注册事件，等待自己调用，将通知到所有子页面
 4.可以调用子页面的方法 childs[childid].method 来调用

示例：
var parentpage = new ParentPage("webar");
    parentpage.publishService('getCamPic', function (options, callback) {
        setTimeout(function () {
            callback({base64: '123', type: 'jpg'});
        }, 1000)
    })
    parentpage




- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2019-01-25
- **Last Updated**: 2022-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### H5父子页面传递数据和方法通用组件

#### 介绍
html 中，父页面嵌套iframe子页面的时候，常需要传递数据，方法回调，这里封装了通用组件，方便自定义方法，注意，所有的方法都是异步回调的，并不处理返回值


使用时，需要调整一下页面的js，父子页面可以自由跨域

#### 使用演示

父页面：
 ParentPage(parentid)

 1.维护多个子页面和它们的服务列表childs

 2.注册服务，等待被子页面调用，可被子页面调用此服务

 3.注册事件，等待自己调用，将通知到所有子页面

 4.可以调用子页面的方法 childs[childid].method 来调用


#### 父页面 示例： 1.html

var parentpage = new ParentPage("webar");

    //公开一个服务

    parentpage.publishService('getCamPic', function (options, callback) {

        setTimeout(function () {

            callback({base64: '123', type: 'jpg'});
            
        }, 1000)
            
    })

    //公开一个事件，允许子页面被通知到

    parentpage.publishEvent('onCameraReady');

    setTimeout(function () {

        //发起事件通知

        parentpage.onCameraReady({name: 'cd'});

        //调用子页面的服务

        parentpage.childs['child2'].calcSum({a: 40, b: 60}, function (res) {

            console.log("父页面收到子页面的calcSum结果:" + JSON.stringify(res));
            
        })
            
    }, 3000)



#### 子页面 示例：2.html 

 子页面

 ChildPage(parentid, childid)

 1.可调用父页面的服务

 2.可被父页面的事件通知到

 3.可向父页面提供服务,父页面以childs[childid].method 来调用

  

 //得到父页面实例

    var parentpage = new ChildPage('webar', 'child2');

    //父页面方法，事件初始化完毕

    parentpage.ready(function (parentid) {

        //调用父页面的方法

        parentpage.getCamPic({quality: 0.6}, function (data) {

            console.log("收到父页面的getCamPic结果:" + JSON.stringify(data));
            
        });

        //响应父页面的事件

        parentpage.onCameraReady(function (cfg) {

            console.log("监控到父页面的事件onCameraReady触发:" + JSON.stringify(cfg));
            
        })

        //向父页面注册一个自己提供服务

        parentpage.registerChildService('calcSum', function (data, cb) {

            console.log("父页面调用子页面的calcSum方法:" + JSON.stringify(data));

            cb({sum: 100});
            
        })
            
    })