JavaScript iframe setting with innerHTML in Internet Explorer
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...
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);
精彩评论