如何将 css 应用于 iframe答案

【问题标题】：How to apply css to an iframe如何将 css 应用于 iframe
【发布时间】：2014-01-14 08:46:05
【问题描述】：

我有一个 iframe，我想将 css 文件应用到它。我尝试了一些互联网的例子，但没有成功。

下面是我的代码

<?php 
    include( 'site/simple_html_dom.php'); 
    $html = file_get_html('http://roosterteeth.com/home.php');
    foreach ($html->find('div.streamIndividual') as $div) 
    {
        file_put_contents('site/test.htm', $div, FILE_APPEND | LOCK_EX);
    }                   
    ?>
    </head>
    <body>
        <iframe src="site/test.htm" style="width:480px; height:800px;" 
            scrolling=true></iframe>
    </body>

下面是我试过的jquery脚本

$('document').ready(function() {
    var cssLink = document.createElement("site/test.htm") 
    cssLink.href = "style.css"; 
    cssLink .rel = "stylesheet"; 
    cssLink .type = "text/css"; 
    frames['frame1'].document.body.appendChild("site/stylesheet.css");
});

我不确定 jquery 代码是否错误。所有文件都在同一个域中。我希望你能帮助并感谢你的时间。

【问题讨论】：

我有预感有一些语法错误。检查控制台 (F12)。
据我了解，css 需要在初始加载时出现在页面上才能发挥作用。等到你可以让 jquery 承担责任时，已经为时已晚。当您运行 $('document').ready() 函数时，已经很多太晚了。
此副本的可能副本：stackoverflow.com/questions/6960406/add-css-to-iframe
也属于stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
@JosephtheDreamer 感谢您的回复。我得到的语法错误是frames['frame1'].document.body.appendChild("site/stylesheet.css");，我得到Uncaught InvalidCharacterError: The string contains invalid characters.

标签： javascript jquery html css iframe

【解决方案1】：

您的 js 代码还不错，但有一些语法错误（按 F12 进入控制台并查看错误控制台）。更重要的是，您希望您的元素成为链接元素，并且您希望将其附加到 iframe 的头部：

$('document').ready(function() {
  var cssLink = document.createElement("style"); 
  cssLink.href = "style.css"; 
  cssLink.rel = "stylesheet"; 
  cssLink.type = "text/css"; 
  frames[0].document.head.appendChild(cssLink);
});

【讨论】：

【解决方案2】：

It may help you.Try this .This is an example of iframe with css rule is applied!

<!DOCTYPE html>
<html>
 <head>
       <style>
          iframe {

              width:500px;
              height:200px;
              border:3px solid #cf5c3f;
              border-radius:10px;
          }
       </style>
    </head>
<body>

<iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

【讨论】：

【解决方案3】：

您可以尝试以下代码将 css 应用于 iframe...

1.首先创建'index.html'文件并在其中添加以下代码

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        <script>
        $(document).ready(function() {
            $('#iframe').load(function() {
                $("#iframe").contents().find("head").append("<style>.text_color{color:red;}@page{margin:0;}</style>");  
            });
        });
        </script>
    </head>
    <body>
        <iframe src="iframe.html" id="iframe" name="iframe"></iframe>
    </body>
</html>

2。接下来创建另一个名为“iframe.html”的文件并添加以下代码

<!DOCTYPE html>
<html>
    <body>
        <div id="text"><span class="text_color">Content inside iframe goes here<span></div>
    </body>
</html>

3.接下来运行“index.html”文件，现在看到“iframe 内的内容在此处”文本颜色将变为红色

【讨论】：