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

时间:2012-08-26 20:29:13

标签: javascript jquery css iframe

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

有没有一种简单的方法 - 除了使用Javascript将类从iframe的头部复制到主文档的头部 - 访问该类并将其应用于主文档?

在主文档中这样的东西(显然不起作用)会很棒:

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

1 个答案:

答案 0 :(得分:0)

嘿,你可以这样做.. 假设你有一个看起来像这样的iframe有一个a和b的iframe。 的 CODE

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