JS获取iframe内被点击单词功能失效的原因排查

• iframe是独立的浏览上下文，和父页面的DOM、window对象完全隔离。你把click事件绑定在父页面的<iframe>标签上，只有点击iframe边框、iframe未加载完成的空白边缘时才会触发事件，点击iframe内部加载的文档内容时，事件是在iframe自身的上下文里触发的，不会冒泡到父页面的iframe标签上，所以你的回调函数根本不会执行。
• 就算你能监听到点击动作，父页面调用的window.getSelection()只能读取父页面自身的文本选区，完全无法获取iframe内部文档的选中内容，两个上下文的API是隔离的。
• 如果iframe加载的url_2和父页面不同源（即协议、域名、端口三者有任意一个不一致），受浏览器同源策略强制限制，父页面没有任何权限访问iframe内部的DOM、事件、选区数据，这种场景下没有任何方法可以实现你要的取词功能。
• 你原本的取词逻辑本身还有隐含缺陷：默认要求点击位置已经存在选区，否则执行s.getRangeAt(0)会直接抛出索引错误；同时没有做文本节点的偏移量边界判断，点击段落第一个/最后一个单词时会出现索引越界问题。

只有当iframe和父页面同源时，才能通过以下方式实现功能，核心是等iframe加载完成后，直接在iframe内部的文档上绑定事件，并且使用iframe自身的window对象读取选区：

// 等待iframe资源加载完成
$("#USCF_CUST").on("load", function () {
  // 获取iframe内部的window、document对象，跨域场景下这一步会直接抛出权限错误
  const iframeWindow = this.contentWindow;
  const iframeDocument = this.contentDocument || iframeWindow.document;

  // 将点击事件绑定到iframe内部的document上
  $(iframeDocument).click(function () {
    const selection = iframeWindow.getSelection();
    // 无有效选区时直接退出，避免报错
    if (selection.rangeCount === 0) return;

    let range = selection.getRangeAt(0);
    const anchorNode = selection.anchorNode;

    // 向前遍历找到单词起始位置，增加边界判断避免偏移量小于0
    while (range.startOffset > 0 && range.toString().indexOf(' ') !== 0) {
      range.setStart(anchorNode, range.startOffset - 1);
    }
    // 跳过开头的空格
    if (range.toString().startsWith(' ')) {
      range.setStart(anchorNode, range.startOffset + 1);
    }

    // 向后遍历找到单词结束位置，增加边界判断避免偏移量超过文本长度
    do {
      range.setEnd(anchorNode, range.endOffset + 1);
    } while (
      range.toString().indexOf(' ') === -1 &&
      range.toString().trim() !== '' &&
      range.endOffset < anchorNode.length
    );

    const str = range.toString().trim();
    alert(str);
  });
});

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