Highlight text in IFrame

Question

I'm trying to make an email signature builder using HTML, CSS and Javascript. I currently consists of a form where the user enters their details and a button to create the signature.

When the button is clicked, I have JS push the details the user has entered into an HTML template and then display the content in an IFrame on the same page. I chose to use an IFrame so that the signature styling is separate from the styling used for the builder page.

Now to make things simpler for the user, I would like to add a button which highlights the contents of the IFrame and then copies it to the clipboard for the user to paste into their Outlook email signature.

I've searched and this answer seems to be fairly popular but I can't highlight the contents of the IFrame. Any ideas on what I've got to do to make this work?

score 2 · Answer 1 · answered Oct 23 '15 at 03:43

2

Here is a JSFiddle of highlighting text within an iframe.

It can't copy the contents of the iframe, but should help you get going. If the user clicks on the iframe they can copy the contents. If I figure out how to copy the contents w/o having to click the iframe i'll let you know . You could just pull the text from the iframe and put it into a temp hidden form in the current doc but that seems like messy workaround.

https://jsfiddle.net/adio01/77LgnyLt/

$(document).ready(function() {
  $('#iframe').contents().find('body').html('<textarea class="highLight">Highlight Me</textarea>');

  $('#click').click(function() {
    var iframe = $('#iframe');
    $('.highlight', iframe.contents()).select();
   });
});

answered Oct 23 '15 at 03:43

user3333134

339
1
5
14

That's close, but I need to select the contents of the iframe itself. The iframe does not contain any user entry fields, just html content. – Rossco Oct 26 '15 at 21:11
I don't think you can select just plain old HTML (unless i's missing something). I would say the hacky workaround is to make it so that when the user pressed the button, you grab the html() for the fields you need from within the iframe, you set that to a text area, and then auto select the text area and copy the text. It's possible to pull the text from the iframe in the parent document that way you don't need to worry about selecting the text within the iframe. – user3333134 Oct 27 '15 at 00:09
Dumb 5 minute edit rule... Here is the JSFiddle. https://jsfiddle.net/77LgnyLt/5/ – user3333134 Oct 27 '15 at 00:18
Thanks heaps for the help, what you wrote wasn't quite what I was looking for (which was probably my fault for not being clear on that). But you definitely helped me connect the dots. – Rossco Oct 27 '15 at 19:45

score 2 · Accepted Answer · answered Oct 27 '15 at 19:44

I managed to figure out what I wanted to do. Big thanks to user3333134 for helping me get on the right track.

Here is a fiddle demonstrating the behaviour I was after. Basically there is some html content in the iframe that I want to copy just like if the user selected it with the mouse and then copy it to the clipboard.

$(document).ready(function () {
    $('#iframe').contents().find('body').html('<p>Line 1</p><p>Line 2</p>');

    $('#click').click(function () {
        var iframe = $('#iframe')[0];

        var doc = iframe.contentDocument;
        doc.execCommand('selectAll');

        try {
           var successful = doc.execCommand('copy');
           var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copying text command was ' + msg);
        } catch (err) {
            console.log('Oops, unable to copy');
        }
    });
});

Highlight text in IFrame

2 Answers2