将 iframe 中的 css 类应用于主文档答案

【问题标题】：Apply css class in iframe to main document将 iframe 中的 css 类应用于主文档
【发布时间】：2012-08-27 05:31:53
【问题描述】：

我正在尝试将在 iframe 的 head 中定义的 CSS 类应用于主文档中的元素。

除了使用 Javascript 将类从 iframe 的头部复制到主文档的头部之外，是否有一种简单的方法来访问该类并将其应用到主文档？

在主文档中这样的东西（显然不起作用）会很棒：

<div class="#iframe.classtoapply">lorem ipsum</div>

【问题讨论】：

可能有用：stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
很确定没有简单的方法可以做到这一点。除了将 iframe 样式表添加到您的主页
没有 CSS 类这样的东西（尽管有类选择器）。你是指 CSS 规则集还是 HTML 类？
我的意思是一个类选择器，比如.classtoapply{color: green}
这是一个带有类选择器的规则集。

标签： javascript jquery css iframe

【解决方案1】：

嘿，你可以这样做.. 假设您有一个 iframe，它看起来像这样，具有 a 和 b 类。代码

<head>

<style>
.a{color:red;}
.b{
color:blue;
}
</style>
</head>

现在假设您有一个类似这样的主页，其中包含该 iframe。您可以编写这样的代码。结帐。

 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<iframe src="youriframe.html"></iframe>
<span class="a" >Hi</span>
<span class="b" >It Worked</span>
<script>
$(function() {
    $('head').append('<style/>');
    setInterval(function() {
        if(typeof($('iframe').contents().find('head>style').html())!='undefined') {
            $('head>style').eq(0).append($('iframe').contents().find('head>style').html());
        }
    }
    ,1);
}
);
</script>
</body>

【讨论】：

最后我使用了类似于@AshirvadSingh 的方法的解决方案。看起来 - 即使它不漂亮 - 这是你能做的最好的。