JavaScript iframe setting with innerHTML in Internet Explorer

Question

I am trying to set iframe's HTML code with JavaScript, works fine with Firefox and Chrome but shows only the link, without the styling with Internet Explorer 9.

The JavaScript code:

window.frames["iview"].document.body.innerHTML = txt;

The txt variable gets the following HTML code:

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            a:link {
                color: #0000C0;
                background-color: #FFFFFF;
                text-decoration: none;
                target-new: none;
            }
            a:hover {
                color: #0000FF;
                background-color: #808000;
                text-decoration: underline;
                target-new: none;
            }
        </style>
    </head>
    <body>
        <a href="http://www.domain.com">link....</a>
    </body>
</html>

Internet Explorer shows the link, but not the CSS style...

You are putting all the above code into the body part of iframe?? — Ankit Jaiswal, May 28 '11 at 09:40

score 1 · Answer 1 · edited May 23 '17 at 12:04

Does the Stack Overflow post How to apply CSS to iFrame? help?

Specifically:

The style of the page embedded in the iframe must be either set by including it in the child page:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Or it can be loaded from the parent page with JavaScript:

var cssLink = document.createElement("link")
cssLink.href = "style.css";
cssLink .rel = "stylesheet";
cssLink .type = "text/css";
frames['frame1'].document.body.appendChild(cssLink);

JavaScript iframe setting with innerHTML in Internet Explorer

1 Answers1