客户端嵌入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有一个限制,就是参数中不能有函数,但在我们的插件方法中,大部分都是有回调函数的,为了让用户习惯原来的调用方式,参数格式还是原来的格式,但是我们对函数进行了一个转换处理,大部分实现的代码也在做这个处理 实际上,这些函数也是在当前窗口执行的,所以也不需要传送给父窗口,所以这些函数存储到本地,在原来函数的位置做一个标记,传递给父窗口, 父窗口接收消息,然后找到这些特殊标记的地方,知道这里是一个回调函数,然后将这里封装成一个函数,这个函数如果被调用,它会将所有传入参数保存成一个数组后保存下来,然后再回传给窗口,子窗口接收消息后,再找到用户调用时的对应函数,进行回调,就完成一个完整调用流程。
关键知识点:
(待填)
代码示例:
(待填)