在不修改iframe文件的情况下如何设置iframe里面的css样式

相信大家应该都会知道，单纯的css是无法控制iframe内元素的样式的。 但我们可以将css文件在iframe目标页里面引用或者通过js去控制iframe内元素的样式。

具体实现代码如下：

为页面所有iframe设置css样式：

$('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设置css样式：

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath , 
      type: "text/css" }
     ));