Question

我有 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代码是否错误。所有文件都在同一个域中。我希望你能帮助并感谢你的时间。

Answer 1

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>

enter image description here

Answer 2

你的js-code并不坏，但是有一些语法错误（按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);
});

Answer 3

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

<强> 1。首先创建＆＃39; index.html＆＃39;文件并在其中添加以下代码

<!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。接下来创建另一个名为＆＃39; iframe.html＆＃39;并向其添加以下代码

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

第3。接下来运行＆＃39; index.html＆＃39;文件，现在看到iframe里面的内容到了这里＆＃39;文字颜色将变为红色

如何将css应用于iframe

3 个答案: