Question

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

我要求某些网站会在iframe中显示，对于这些网站，我也希望翻译iframe中当前选定的文字。

扩展开头的源代码，它获取当前选定的文本，如下所示 -

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

如何更改上面的代码/添加一些代码，以便变量'selection'可以存储主窗口中当前选定的文本，或iframe中当前选择的文本？即使要翻译的文本在iframe内，也应正确初始化变量'range'。

此外，翻译完成后，原始语言文本将被网页中相同位置的翻译文本替换，变量“替换”将存储翻译后的文本 -

    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文档而不是当前的主document，然后您可以从中确定实际选择的文本。

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

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

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

1 个答案: