Dynamically loading HTML into and iframe

Question

I'm trying to dynamically add an iframe with HTML to an existing page. I have gotten the iframe to load and show. However the "Body" of the iframe does not show. Any help?

<html>
<head>
<script>
window.onload = function() {
                var iframe = document.createElement('iframe');
                var html =
                    '<html><head>' +
                        '<scr' + 'ipt src="https://localhost:44302/foo.js"></scr' + 'ipt>' +
                        '<scr' + 'ipt src="https://localhost:44302/bar.js"></scr' + 'ipt>' +
                    '</head>' +
                    '<body>Hi</body></html>';
                iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
                document.body.appendChild(iframe);
                console.log('iframe.contentWindow =', iframe.contentWindow);
            }
</script>
</head>
<body></body>
</html>

https://jsfiddle.net/0m5axpxx/2/

'<scr' + 'ipt looks like XSS

zer00ne
– zer00ne

2015-11-15 09:01:11 +00:00
Commented Nov 15, 2015 at 9:01 — zer00ne
– zer00ne, Commented Nov 15, 2015 at 9:01

fuyushimoya · Accepted Answer · 2015-11-15 08:36:15Z

3

Sorry, not enough rep to directly comment.

var iframe = document.createElement('iframe');
var html =
    '<html>' + 
    '<head>' +
    '<scr' + 'ipt src="https://localhost:44302/oidc.js"></scr' + 'ipt>' +
    '<scr' + 'ipt src="https://localhost:44302/requestToken.js"></scr' + 'ipt>' +
    '</head>' +
    '<body>Hi</body>' + 
    '</html>';

iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);

Your example in jsfiddle, the 2nd line of 'script', is mistyped to srcipt, fix it and it works. JsFiddle

var iframe = document.createElement('iframe');
var html =
    '<html>' + 
    '<head>' +
    '<scr' + 'ipt src="https://localhost:44302/oidc.js"></scr' + 'ipt>' +
    '<scr' + 'ipt src="https://localhost:44302/requestToken.js"></scr' + 'ipt>' +
    '</head>' +
    '<body>Hi</body>' + 
    '</html>';

iframe.srcdoc = html;
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);

edited Nov 15, 2015 at 8:36

answered Jun 16, 2015 at 15:10

fuyushimoya

9,8133 gold badges30 silver badges34 bronze badges

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

1 Comment

Alex Over a year ago

You can also use the srcdoc attribute instead of src to avoid web-kit cross-domain issues. See here: stackoverflow.com/a/22748658/265877

Collectives™ on Stack Overflow

Dynamically loading HTML into and iframe

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related