如果iframe的内容不完全在您的控制之下，或者您希望以不同的样式访问来自不同页面的内容，您可以尝试使用JavaScript操作它。

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

请注意，根据您使用的浏览器，这可能只适用于来自同一域的页面。

下面是如何直接应用CSS代码，而不使用<link>来加载额外的样式表。

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

这将在iframe页面中隐藏横幅。谢谢你的建议!

扩展上面的jQuery解决方案来处理加载帧内容的延迟。

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

iframe被大多数浏览器像处理一个不同的HTML页面一样处理。如果希望对iframe的内容应用相同的样式表，只需从其中使用的页面引用它。

作为替代，你可以使用CSS-in-JS技术，如下所示:

https://github.com/cssobj/cssobj

它可以动态地将JS对象作为CSS注入iframe

如果您在iframe中控制页面，如hangy所说，最简单的方法是创建一个具有通用样式的共享CSS文件，然后只需从html页面链接到它。

否则，您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性，因为可能会滥用欺骗和其他黑客行为。

本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。