如何将CSS样式应用到iframe内容中?

6

我正在尝试为iframe内的内容应用CSS样式,请查看此链接http://jsfiddle.net/pPqGe/

jQuery:

$(document).ready(function() {
    $('iframe').contents().find('h1').css('color','red');
});

HTML:

<iframe src="mysite" width="100%" height="100%" id="myframe"></iframe>

我使用了一个实时网站作为iframe的源。


1
你可以将它们作为查询字符串传递到嵌入的页面。 - emerson.marini
shnisaka是正确的,否则这是不可能的。浏览器因安全原因而带有该限制,它被称为“跨域脚本”。 - Cedric Reichenbach
如果您正在调用与您相同域的另一个网页,则只需使用ajax调用该页面内容即可。 - klewis
1个回答

7

它可以用,问题在于只有H2,没有H1。 查看此链接http://jsfiddle.net/pPqGe/1545/.

HTML:

<iframe src='jsfiddle.net'></iframe>

JavaScript:

$(document).ready(function() {
    $('iframe').contents().find('h2').css('color','red');
    $('iframe').contents().find('#header').css('opacity','.2');
});

是的,你说得对。在jsfiddle中它运行良好,但我正在使用另一个用于iframe的源文件。例如:"<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript"> $(document).ready(function() { $('iframe').contents().find('.headline').css('color','red'); }); </script> </head> <body> <iframe src="http://www.smashingmagazine.com/" width="100%" height="100%"></iframe> </body>" 它不支持。_.headline_类在smashingmagazine上可用,但不会受到影响。 - Vineesh Surendran

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接