2

I have a javascript based Google Chrome Extension that takes as input the currently selected text in the web page, and then translates that text into English. The original text is replaced with the translated text at same position...

I have a requirement where some sites will be shown in an iframe, and for those sites also I want to translate the currently selected text within the iframe.

The source code at the beginning of the extension, where it obtains the currently selected text, is given below--

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

How do I change the above code/add some code so that the variable 'selection' can store either the currently selected text in main window, or the currently selected text within an iframe? Also the variable 'range' should be initialised correctly even if the text to be translated is within an iframe...

Also, once the translation is done, the original language text is replaced by translated text at same place in web page, the variable 'replacement' stores the translated text--

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

Note that the code for initialisation of 'range' is given in the first code section shown in this question...

How do I go about modifying the above code so that the new span element is created within the iframe? What I understood is that to do this, the key part is the code 

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

The variable 'holder' should be able to create the span element in an iframe also...

How do I modify this code?

Arvind
  • 6,404
  • 20
  • 94
  • 143

1 Answers1

0

you should reference the iframe document instead of the current main document, from there you can determine which text is actually selected.

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

note that this is untested but the idea makes sense.

epoch
  • 16,396
  • 4
  • 43
  • 71
  • in the code $('iframe').getSelection() the value 'iframe' represents the name of the iframe, right? Or can I use your code as it is, irrespective of the name of the iframe in which translation has to be done...Also i cannot see any call to function 'getIFrameDocument(iframe)'...Pardon me if my queries sound dumb to you, I am a beginner in javascript (although I do find it truly fascinating) :) – Arvind Oct 17 '11 at 13:12
  • @Arvind, it's ok, i have not tested this, just an idea :-). yes you should pass in your iframe-id, i updated the code for more clarity – epoch Oct 17 '11 at 13:16
  • @epoch- thanks, now it looks very clear... I have one final query ... Is there some way to autodetect the iframe (in which text has been selected)? The scenario where I want to use this code involves multiple iframes, and I would like to translate each iframe one-by-one, automatically translating the text of that iframe in which the user has selected text for translation...thanks for your help... – Arvind Oct 17 '11 at 13:37
  • @Arvind, pleasure, i do not have a working copy of the code and am not able to test, would be cool if you could post a fiddle? – epoch Oct 17 '11 at 13:44
  • @epoch- please see the fiddle at http://jsfiddle.net/arvindikchari/eutkA/#base, note that there is one more js for configuring the code at above page to be used as part of a google chrome extension, if you want I can create a fiddle for that js page as well.. – Arvind Oct 17 '11 at 14:15
  • @epoch- not sure if i created the fiddle correctly, hence giving you the url to git source of the extension-- https://github.com/crfoundry/xlate Thanks... – Arvind Oct 17 '11 at 14:17
  • I put in a separate question for obtaining the Iframe ID of the iframe in which user has selected some text... that solution, at http://stackoverflow.com/questions/7807510/determine-the-frame-id-name-when-a-user-has-selected-text-in-that-frame-the-pag, combined with your answer, will provide the solution that I wish to have. Thanks a lot for your help! – Arvind Oct 18 '11 at 15:26