客户端嵌入iframe

1. 场景:

在依赖IPU框架的app界面(主界面简称A)嵌入Iframe(子界面简称B),需求:可以从B中调用IPU框架原生功能,并能实现回调;

2. 解决思路:

  • 跨域:

    如果直接在子页面使用ipu框架调用原生功能,目前有一个问题,不能正确的回调,可能回调到父窗口了(这个地方不熟悉相关实现) 所以只好与父窗口通信,让父窗口调用,以便能正确接收到回调消息,所以使用了html5的postMessage方法,而且这样的话,子窗口页面也不需要嵌入一堆我们的js,减少对子窗口代码的影响。

    解决方案:

    利用postMessage实现从B中发消息给A,在A中调用原生功能,如有回调结果,再从A返回消息给B; postMessage简介: 主要有两个方法,一个方法是发送消息,一个方法是接收消息,具体见(https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

现在业务场景分析: 因为ipu是模块化的,子窗口使用postMessage传送消息进行调用时,传送的消息简介封装下,必需的三个信息 要调用的模块名称(字符串) 要调用的模块的方法(字符串) 调用方法需要的参数(数组) 使用postMessage有一个限制,就是参数中不能有函数,但在我们的插件方法中,大部分都是有回调函数的,为了让用户习惯原来的调用方式,参数格式还是原来的格式,但是我们对函数进行了一个转换处理,大部分实现的代码也在做这个处理 实际上,这些函数也是在当前窗口执行的,所以也不需要传送给父窗口,所以这些函数存储到本地,在原来函数的位置做一个标记,传递给父窗口, 父窗口接收消息,然后找到这些特殊标记的地方,知道这里是一个回调函数,然后将这里封装成一个函数,这个函数如果被调用,它会将所有传入参数保存成一个数组后保存下来,然后再回传给窗口,子窗口接收消息后,再找到用户调用时的对应函数,进行回调,就完成一个完整调用流程。

关键知识点:

(待填)

代码示例:

(待填)

  • 同源:

    解决方案:

    关键知识点:

    (待填)

    代码示例:

    (待填)

    待完善

    1、父子窗口通信时,没有专门的消息验证,如果别人窗口也要使用postMessage发送消息会有问题,解决方案,增加消息类型字段,进行验证 2、目前的调用,只支持回调式的调用,如果调用本身不是回调,是直接返回的一个调用,目前不能支持,或需要额外代码处理 3、目前代码封装还不是太好,最好是返回一个对象,不直接返回一个方法,以便扩展和维护,及减少对已有代码的影响
Copyright © aiipu.com 2017 all right reserved,powered by Gitbook该文件修订时间: 2020-09-01 15:11:34

results matching ""

    No results matching ""