keyman.setDefaultKeyboardForControl对iframe失效 如何手动设置指定语言

'keymanweb.setKeyboardForControl' cannot set keyboard on iframes

出现该报错的核心原因是Keyman Web的实例运行在父页面的上下文，无法直接操作iframe独立DOM上下文内的元素，也不支持将iframe容器作为绑定入参。具体实现方案如下：

前置判断：确认iframe同源状态 #

如果iframe的域名、协议、端口和父页面不一致属于跨域场景，父页面无法直接访问iframe内部DOM，只能通过iframe内部独立集成或postMessage通信实现需求。

方案1：iframe内部独立集成Keyman（兼容性最高，同源/跨域均可使用） #

这是最推荐的实现方式，不会出现上下文冲突问题：

• 在iframe对应的HTML页面中，和普通页面一样引入Keyman Web的初始化脚本
• 在iframe内部的JS逻辑中，直接调用keyman.setDefaultKeyboardForControl(需要绑定的输入元素, keyboard, languageCode)即可完成指定语言键盘的绑定

方案2：父页面操作同源iframe内部元素 #

如果iframe和父页面同源，也可以直接在父页面完成绑定，不需要修改iframe页面代码：

• 首先获取iframe的内部文档对象：

const iframe = document.querySelector('#你的iframe选择器');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

• 选中iframe内部需要绑定键盘的可输入元素（input、textarea、contenteditable元素均可）：

const targetInput = iframeDoc.querySelector('#要绑定的输入元素选择器');

• 直接调用父页面的Keyman方法绑定即可：

keyman.setDefaultKeyboardForControl(targetInput, keyboard, languageCode);

方案3：可控跨域iframe的通信实现 #

如果iframe跨域但你可以修改iframe页面的代码，可以通过postMessage通信实现父页面控制：

• 在iframe页面内监听postMessage消息，收到指定的键盘设置参数后，调用自身页面内的Keyman方法完成绑定
• 父页面调用iframe.contentWindow.postMessage()方法，传递要设置的键盘ID、语言编码等参数即可

• 禁止将iframe容器元素作为入参传给setDefaultKeyboardForControl方法，该方法仅支持可输入元素作为绑定目标
• 不同iframe的上下文互相独立，各自的Keyman实例需要单独加载所需的语言包和键盘资源

内容的提问来源于stack exchange，提问作者Aliasgar Aabadani