如何用jQuery检测同域iFrame内输入框被选中并触发事件？

核心结论 #

同域情况下完全可以通过jQuery操作iFrame内的DOM元素，包括绑定事件和遍历元素，不存在跨域权限限制。

具体实现步骤 #

1. 等待iFrame加载完成 #

必须在iFrame加载完毕后再操作内部元素，否则会因为DOM未渲染导致找不到目标元素：

$('#yourIframeId').on('load', function() {
  // 后续操作写在这里
});

2. 获取iFrame内部文档对象 #

通过contents()方法获取iFrame的document对象，以此为入口操作内部元素：

const iframeContent = $(this).contents();

3. 检测输入框选中事件并触发屏幕键盘 #

针对iFrame内的所有输入类元素（input、textarea、可编辑元素）绑定focus事件，触发时调用屏幕键盘：

// 直接绑定已存在的元素
iframeContent.find('input, textarea, [contenteditable="true"]').on('focus', function() {
  // 这里写入调用屏幕键盘的逻辑
  // 示例：showOnScreenKeyboard();
  console.log('输入框已激活，显示屏幕键盘');
});

// 若iFrame内有动态生成的输入框，用事件委托确保新元素也能触发
iframeContent.on('focus', 'input, textarea, [contenteditable="true"]', function() {
  // 调用屏幕键盘逻辑
});

4. 遍历iFrame内的元素 #

通过each()方法遍历指定元素，做批量操作：

// 遍历所有input元素
iframeContent.find('input').each(function(index, elem) {
  // 示例：打印每个输入框的name属性
  console.log(`输入框${index+1}的name值：`, $(elem).attr('name'));
  // 可在此添加初始化样式、默认值等操作
});

注意事项 #

• 确保iFrame与主页面完全同域（协议、域名、端口一致），否则浏览器会阻止DOM操作。
• 如果iFrame的src是本地HTML文件，需在服务器环境下运行（不能直接打开本地文件），避免跨域问题。

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