修改 javascript 代码，以便获取 iframe 中当前选定的文本

Question

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

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

下面给出了扩展开头的源代码，它在其中获取当前选定的文本 -

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

如何更改上述代码/添加一些代码，以便变量“选择”可以将当前选定的文本存储在 main 中窗口，还是 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;
    }

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

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

 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();
}

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