Tutorial :how to get selected text from iframe with javascript?



Question:

<html>   <body>    <script type="text/javascript">       function smth() {        if (document.getSelection) {      var str = document.getSelection();      if (window.RegExp) {        var regstr = unescape("%20%20%20%20%20");        var regexp = new RegExp(regstr, "g");        str = str.replace(regexp, "");      }      } else if (document.selection && document.selection.createRange) {       var range = document.selection.createRange();       var str = range.text;      }           alert(str);     }    </script>           <iframe id="my"  width="300" height="225">     .....some html ....      </iframe>              <a href="#" onclick="smth();">AA</a>   </body>      </html>  

with smth function i can get selected text from some div, but it doesnt work with iframe. any ideas how to get selected text from iframe ?


Solution:1

document.getSelection

Is on the outer document. To get the selection of the document in the iframe you need to grab the inner document:

var iframe= document.getElementById('my');  var idoc= iframe.contentDocument || iframe.contentWindow.document; // ie compatibility    idoc.getSelection()  

Note however that WebKit does not support document.getSelection() or document.selection. Try replacing it with window.getSelection() which works in both Firefox and WebKit, but returns a selection object (a collection/wrapper around Ranges), which needs stringing:

var idoc= iframe.contentDocument || iframe.contentWindow.document;  var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;    ''+iwin.getSelection()  

I'm not sure what the point of this is:

if (window.RegExp) {    var regstr = unescape("%20%20%20%20%20");    var regexp = new RegExp(regstr, "g");    str = str.replace(regexp, "");  }  

RegExp is basic JavaScript dating back to the very earliest version; it will always be there, you don't have to sniff for it. The URL-encoding of multiple spaces is quite unnecessary. You don't even need RegExp as such, a string replace could be written as:

str= str.split('     ').join('');  


Solution:2

You can't access data inside an iframe that is from a domain different than yours. This is due to the Same origin policy.


Solution:3

You need to get the selection from the document/window in the iframe.

function getIframeSelectionText(iframe) {    var win = iframe.contentWindow;    var doc = win.document;      if (win.getSelection) {      return win.getSelection().toString();    } else if (doc.selection && doc.selection.createRange) {      return doc.selection.createRange().text;    }  }    var iframe = document.getElementById("my");  alert(getIframeSelectionText(iframe));  


Solution:4

Following code will return the selected text.

function getSelectedText(frameId) {       // In ExtJS use:       // var frame = Ext.getDom(frameId);       var frame = document.getElementById(frameId);         var frameWindow = frame && frame.contentWindow;       var frameDocument = frameWindow && frameWindow.document;         if (frameDocument) {           if (frameDocument.getSelection) {               // Most browsers               return String(frameDocument.getSelection());           }           else if (frameDocument.selection) {               // Internet Explorer 8 and below               return frameDocument.selection.createRange().text;           }           else if (frameWindow.getSelection) {               // Safari 3               return String(frameWindow.getSelection());           }       }         /* Fall-through. This could happen if this function is called          on a frame that doesn't exist or that isn't ready yet. */       return '';   }  

Hope this will help to someone.


Solution:5

This code works in all modern browsers:

var iframe = document.getElementById('my');  var idoc = iframe.contentDocument || iframe.contentWindow.document; // ie compatibility  var text = idoc.getSelection().toString();  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »