html5父子页面数据传递,H5父子页面传递数据和方法通用组件: html 中，父页面嵌套iframe子页面的时候，常需要传递数据，方法回调， 这里封装了通用组件，方便自定义方法，注意，所有的方法都是...

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});

})

})