Javascript 将iframe中的css类应用于主文档_Javascript_Jquery_Css_Iframe

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

javascript jquery css iframe

Javascript 将iframe中的css类应用于主文档,javascript,jquery,css,iframe,Javascript,Jquery,Css,Iframe,我试图将iframe的head中定义的CSS类应用于主文档中的元素除了用Javascript将类从iframe的头部复制到主文档的头部之外，有没有一种简单的方法来访问该类并将其应用到主文档在主文档中类似这样的内容（显然不起作用）将非常棒： <div class="#iframe.classtoapply">lorem ipsum</div> lorem ipsum 嘿，你可以这样做。。假设你有一个iframe，它看起来像这样，有类a和类b。代码 <head

我试图将

iframe

的

head

中定义的CSS类应用于主文档中的元素

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

在主文档中类似这样的内容（显然不起作用）将非常棒：

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

lorem ipsum

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

<head>

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


.a{颜色：红色；}
.b{
颜色：蓝色；
}

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

 <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>


你好
它起作用了
$（函数（）{
$（'head'）。追加（''）；
setInterval（函数（）{
if（typeof（$（'iframe'）.contents（）.find（'head>style'）.html（））！='undefined'）{
$（'head>style'）.eq（0）.append（$（'iframe'）.contents（）.find（'head>style'）.html（））；
}
}
,1);
}
);

可能很有用：很确定没有简单的方法可以做到这一点。除了将iframe样式表添加到主页面之外，没有CSS类（尽管有类选择器）。你指的是CSS规则集还是HTML类？我指的是类选择器，比如

.classtoapply{color:green}

，这是一个带有类选择器的规则集。最后，我使用了一种类似于@AshirvadSingh方法的解决方案。看起来——尽管它不漂亮——这是你能做的最好的了。