0

Following is a javaScript function to get selected content from an iframe

function getIframeSelectionText(iframe) {
    var win = iframe.contentWindow;
    var doc = win.document;

    if (win.getSelection) {
        return win.getSelection();
    } else if (doc.selection && doc.selection.createRange) {
        return doc.selection.createRange();
    }
}

The Sample iframe looks like this:

<iframe id="iframeId" type="html" src="__FILE_PATH__" width="100%" height="750px;"></iframe>

The implementation looks like:

var content = getIframeSelectionText(document.getElementById("iframeId"));

What I get is the text selected. I need HTML(because I want to catch the images too)

I tried adding .html() to getSelection() but didn't work. Solution can involve jQuery too.

How to go forward?

---EDIT---

A close hint is found here: window.getSelection() gives me the selected text, but I want the HTML

A reference to the Selection object in question is here: https://developer.mozilla.org/en-US/docs/Web/API/Selection

---POSSIBLE SOLUTION---

Here is a solution to the similar(not the same) problem I'm facing: https://stackoverflow.com/a/124929/2284357 and another one is Get Selected HTML in browser via Javascript

Community
  • 1
  • 1

2 Answers2

1

This returns the selected text node

let node = iframe.contentWindow.getSelection().baseNode

which afterwards can be used to get the parent node HTML

let html = node.parentElement.innerHTML
  • Thanks. However not all the contents selected are inside `.baseNode` In my case I'm getting the top most HTML only. –  Feb 22 '17 at 11:36
  • Rather which part contains the selected HTML in `Selection` object will be helpful. Or how to get parse the object. –  Feb 22 '17 at 11:37
  • 1
    The selection object doesn't contain the actual HTML, it can be casted to string using `getSelection().toString()` but in order to get the HTML itself you should use either baseNode, focusNode, anchorNode or extendNode provided on the selection object –  Feb 22 '17 at 11:42
  • Good hint. `toString()` returns text only. HTML can be found between `anchorNode` and `focusNode` –  Feb 22 '17 at 11:44
0

This should get you on the right path...

$("body").on("click","#iframeId",function(){ 
    $(this).contents().find("html").html();
cpardon
  • 487
  • 4
  • 24
  • Pardon my knowledge in JS. is the `"load"` for `onload` event? I actually need it for `click` event and html of the selection by mouse. –  Feb 17 '17 at 12:58
  • 1
    Sorry, not sure why i'd assumed you might be trying to gather the html on load. Here's a click option... $("body").on("click","#iframeId",function(){ – cpardon Feb 17 '17 at 13:04
  • I've updated the answer to with this click modification. I'm assuming that you are trying to get the html content of #iframeID when the user clicks it. – cpardon Feb 17 '17 at 13:11
  • So far it's working. But as in my question I'm actually looking for the html of the user selection. I think a variable should be inserted inside `find()` As I'm not trying to grab the whole HTML. –  Feb 17 '17 at 13:15
  • 1
    Sorry. Your original question was a bit vague for me to understand. You can specify the element, class or id you are wanting to locate inside .find(). Example: $(this).find('#bookmark'); – cpardon Feb 17 '17 at 13:29
  • Great. I just want to know how to make this `#bookmark` a variable of user mouse selection. Like `win.getSelection()` but in current context, which will work. –  Feb 17 '17 at 13:32
  • @NirjharLo I'm trying to assist, but you haven't provided a html example that I can play with to understand what a user might have SELECTED inside of this iframe. – cpardon Feb 17 '17 at 13:45
  • Pasted a piece of HTML. Please see if you can give me some guidance. –  Feb 17 '17 at 14:03
  • Is this iframe url hosted on another domain? or same domain but different port number? – cpardon Feb 17 '17 at 14:44
  • The iframe and the `src` both are in same domain. The image is however from a different domain. –  Feb 17 '17 at 16:16