Internet Explorer 中带有 innerHTML 的 JavaScript iframe 设置答案

【问题标题】：JavaScript iframe setting with innerHTML in Internet ExplorerInternet Explorer 中带有 innerHTML 的 JavaScript iframe 设置
【发布时间】：2011-09-03 21:14:22
【问题描述】：

我正在尝试使用 JavaScript 设置 iframe 的 HTML 代码，在 Firefox 和 Chrome 上运行良好，但只显示链接，没有 Internet Explorer 9 的样式。

JavaScript 代码：

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

txt 变量获取以下 HTML 代码：

<!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 显示链接，但不显示 CSS 样式...

【问题讨论】：

你把上面所有的代码都放到了iframe的body部分？？
是的，有没有办法设置头部也一样？？？

标签： javascript internet-explorer iframe innerhtml

【解决方案1】：

堆栈溢出帖子 How to apply CSS to iFrame? 有帮助吗？

具体来说：

嵌入在 iframe 中的页面的样式必须通过将其包含在子页面中来设置：

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

或者可以使用 JavaScript 从父页面加载：

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

【讨论】：