Change iframe in jQuery, (content not url)

Question

I am currently creating an email plugin for a stats/reporting package we use. We use a third party mail distributor who run a pretty cool mail management package.

The upshot is that I'm trying to develop a plugin that allows us to preview the emails before they're sent. The mail client offer a simple JSON lookup, and this seems to fit the bill.

I'm previewing this content in an iframe in order to separate possbly contradicting CSS etc.

However: I don't actually know how to change the content in an iframe.

To be clear as well: I don't want to change the URL, I want to entirely re-write the content of the iframe. I've looked around an no one seems to tackle that specific problem... they only change the URL.

SO here's the question in pseudo-code:

[this function is called onMouseUp() from a select pull down in HTML]

var replacement = '<div>Hello world. This is new content.</div>';

$('epframe').CompletelyReplace(replacement)

I'm sure it's not too hard, but I'm not the best at jQuery/Javascript, so does anyone have any pointers?

Many thanks. Rick

Is the iframe pointing at your server, or the mail server.

Kevin B
– Kevin B

2013-05-07 15:00:11 +00:00
Commented May 7, 2013 at 15:00 — Kevin B
– Kevin B, Commented May 7, 2013 at 15:00

Gurpreet Singh · Accepted Answer · 2013-05-07 15:32:30Z

1

Try this:

$(document).ready(function() {
   $('#target').mouseup(function() {
      var replacement = '<div>Hello world. This is new content.</div>';    
      $('#epframe').contents().find('html').html(replacement);
   });
});

It will work on same domain, check out same origin policy for more details.

edited May 7, 2013 at 15:32

answered May 7, 2013 at 15:01

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

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

2 Comments

elb98rm Over a year ago

Pretty good, but not quite. I was looking to replace the whole HTML, not just the body, as I'll need to modify head (for css etc)... I've modified the above code to be: $('#epframe').contents().find('html').html(replacement); This seems to work. I'd recommend you update your answer too. Accepting now.

elb98rm Over a year ago

Oh - and with ref to same origin.. the point of the iframe is to maintain complete separation of css etc. I'm simply dumping a a variable, instead of the URL, so there's no cross domain problems. :)

Collectives™ on Stack Overflow

Change iframe in jQuery, (content not url)

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related