Select HTML from iframe using Javascript / jQuery

Question

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

score 1 · Accepted Answer · 2017-02-22 11:33:53Z

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

edited Feb 22, 2017 at 11:33

answered Feb 22, 2017 at 11:17

user4602228

Sign up to request clarification or add additional context in comments.

4 Comments

user2284357 Over a year ago

Thanks. However not all the contents selected are inside .baseNode In my case I'm getting the top most HTML only.

user2284357 Over a year ago

Rather which part contains the selected HTML in Selection object will be helpful. Or how to get parse the object.

user4602228 Over a year ago

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

user2284357 Over a year ago

Good hint. toString() returns text only. HTML can be found between anchorNode and focusNode

cpardon · Accepted Answer · 2017-02-17 13:07:33Z

0

This should get you on the right path...

$("body").on("click","#iframeId",function(){ 
    $(this).contents().find("html").html();

edited Feb 17, 2017 at 13:07

answered Feb 17, 2017 at 12:54

cpardon

4855 silver badges24 bronze badges

10 Comments

user2284357 Over a year ago

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.

cpardon Over a year ago

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 Over a year ago

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.

user2284357 Over a year ago

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.

cpardon Over a year ago

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');

|

Collectives™ on Stack Overflow

Select HTML from iframe using Javascript / jQuery

2 Answers 2

4 Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related