Question

I am trying to run the following code, to assign user selected text in web page to a variable.

The code works fine if the web page(in which text has been selected) is within the main window, however if the text is in an iframe, then the code is unable to detect the iframe at all.

Javascript code–

var iframe_or_main= 'main';
var selection;
selection = document.getSelection();
if (!selection) //this means that user has selected text within an iframe (and not within main window)...
{   
    //this variable tells us that the user has selected text within an iframe... 
    //this is required when adding an element with translated text to web page...
    iframe_or_main='iframe';
    var id_of_iframe;
    id_of_iframe= getIframeWithSelection(window);
    console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);
    selection = getIFrameDocument(document.getElementById(id_of_iframe)).getSelection();


}
//  return; // selection is probably in an iframe;

console.log(" Indicator - iframe or main? --" + iframe_or_main)";
console.log(" Iframe id (if applicable)=" + id_of_iframe);

Also, output when I select text in an iframe, is shown below–

Indicator - iframe or main? --main
Iframe id (if applicable)=undefined

Note that I have tried selecting text in a web page (open in iframe) that belongs to same domain as main web page. I also tried doing this with same origin policy disabled in Google Chrome- using start parameters to disable it. In both cases I am getting the same output as above.

Is there something wrong with my code? How do I fix it?
Please note that I want the code to work in Google Chrome, although if it works across other browsers that would be a plus.

Answer 1

You cannot access the DOM of a document by using the IFrame as the root. Use the .contentWindow property to access the window of an iframe. Also, about “ID of frame, if applicable”. Your code will break when the IFrame doesn’t have an ID. See the code proposal at the bottom of this answer.

if (!selection){   
    iframe_or_main = 'iframe';
    var iframes = document.getElementsByTagName("iframe");
    var test_selection;
    for(var i=0; i<iframes.length; i++){
        try{ //Try-catch to prevent the same-origin policy from breaking the code
            if(test_selection = iframes[i].contentWindow.document.getSelection()){
                id_of_frame = iframes[i].id;
                selection = test_selection;
                break;
            }
        }catch(e){}
    }
    console.log(" Content selected within an iframe- iframe id=" + id_of_iframe);    
}

If the ID of the frame doesn’t matter, use the following code:

if (!selection){   
    iframe_or_main = 'iframe';
    var test_selection;
    for(var i=0; i<frames.length; i++){
        try{ //Try-catch to prevent the same-origin policy from breaking the code
            if(test_selection = frames[i].document.getSelection()){
                selection = test_selection;
                break;
            }
        }catch(e){}
    } 
}

See also: determine the frame id/name when a user has selected text in that frame- the page has multiple frames