Retrieving html from Iframe using jQuery

Question

I've searched through the other questions and have tried the suggestions but the answers do not seem to be working as I require.

I am retrieving emails from a database table and showing the body of the email within an iframe. I then need to fetch the html of the body of the email within a javascript file.

Code I have tried:

var body = $('#email-body').contents().find('html').html();

RETURNS: <head></head><body></body>

var body = '<?php echo $email->body;?>';

RETURNS: Invalid or unexpected token
(most likely due to the linebreaks the HTML has within it.)

It seems like the first option should work but it isn't pulling in the full contents as requested.

--EDIT--

As per comments, I attempted the following:

var iframe = document.getElementById('email-body');
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var body;
if (iframeDocument) {
    body = iframeDocument.documentElement.outerHTML;
}

RETURNS: <html><head></head><body></body></html>

-- EDIT 2 --

Iframe is populated as so:

<iframe id="email-body" src="/api/emails/email/{{{ $email->id }}}/body" onload="resizeIframe(this)"></iframe>

The email I am testing this with:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h2>Testing</h2>
        <div>And again.</div>
    </body>
</html>

see http://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript — Jaromanda X, Aug 03 '16 at 12:42
what happens if you remove `.find('html')` ... so `var body = $('#email-body').contents().html();` or even change `'html'` to `'body'` ... so var body = $('#email-body').contents().find('body').html(); — Jaromanda X, Aug 03 '16 at 12:46
@JaromandaX This returns the following: Uncaught TypeError: Cannot read property 'createDocumentFragment' of null OR using body instead returns nothing at all. — user2759865, Aug 03 '16 at 12:50
it may be HOW you're creating and "populating" the iframe that is the issue - perhaps show some relevant code — Jaromanda X, Aug 03 '16 at 12:54
perhaps your code is running before the iframe has loaded ... add the code to a function called in onload — Jaromanda X, Aug 03 '16 at 13:02
Doing: $(document).ready(function() {var body = $('#email-body').contents().find('html').html()}); Now throws an error instead. — user2759865, Aug 03 '16 at 13:07
you need to wait until the iframe has loaded, not the main document ... i should've specified, **the iframe onload** — Jaromanda X, Aug 03 '16 at 13:08
Ah apologies, my mistake! Yes this is now working, thank you so much. — user2759865, Aug 03 '16 at 13:59

score 0 · Accepted Answer · answered Aug 03 '16 at 14:01

0

Needed to run the script once the iframe had loaded to get the correct data.

var body = '';
$('iframe').on('load', function() {
    body = $('#email-body').contents().find('html').html();
});

answered Aug 03 '16 at 14:01

user2759865

235
2
16

Retrieving html from Iframe using jQuery

1 Answers1