javascript - 修改 javascript 代码，使其在 iframe 中获取当前选定的文本

Question

我有一个基于 javascript 的 Google Chrome 扩展程序，它将网页中当前选定的文本作为输入，然后将该文本翻译成英文。原始文本在同一位置被翻译文本替换...

我有一些网站将显示在 iframe 中的要求，对于这些网站，我还想翻译 iframe 中当前选定的文本。

扩展开头的源码，获取当前选中的文本，如下--

var selection = document.getSelection();
var range = selection.getRangeAt(0);

如何更改上面的代码/添加一些代码，以便变量“selection”可以存储主窗口中当前选定的文本，或 iframe 中当前选定的文本？即使要翻译的文本位于 iframe 中，也应正确初始化变量“范围”...

此外，一旦翻译完成，原始语言文本将在网页的同一位置被翻译文本替换，变量'replacement'存储翻译文本--

    var holder = document.createElement('span');
    holder.innerHTML = replacement;
    var child = holder.firstChild;
    var ref = child.cloneNode(true);
    // ... now insert into document in place of the original content:
    range.deleteContents();
    range.insertNode(ref);
    while (child = child.nextSibling) {
      ref.parentNode.insertBefore(child.cloneNode(true), ref.nextSibling);
      ref = ref.nextSibling;
    }

请注意，“范围”的初始化代码在此问题中显示的第一个代码部分中给出...

我该如何着手修改上述代码，以便在 iframe 中创建新的 span 元素？我的理解是，要做到这一点，关键部分是代码

 var holder = document.createElement('span');

变量“holder”也应该能够在 iframe 中创建 span 元素......

如何修改此代码？

Answer 1

您应该引用 iframe 文档而不是当前的主要 文档，从那里您可以确定实际选择了哪个文本。

function getIFrameDocument(iframe) {
    var doc;
    if (iframe.contentDocument) {
        doc = iframe.contentDocument;
    } else if (iframe.contentWindow) {
        doc = iframe.contentWindow.document;
    } else if (iframe.document) {
        doc = iframe.document;
    } else {
        doc = window.frames[iframe.id].document;
    }

    return doc;
}

// try to get main document selection
var selection = document.getSelection();
if (!selection) {
    selection = getIFrameDocument(document.getElementById('your-iframe-id')).getSelection();
}

请注意，这是未经测试的，但这个想法是有道理的。