通过 jQuery 动态加载 css 文件不起作用

Question

通常我会在 html 中加载一个 javascript 文件：

<script src="v/0.2/strapdown.js"></script>

此文件 strapdown.js 本身加载 css 个文件（第 69 - 83 行）：Github > strapdown.js

  // Stylesheets
  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/'+theme+'.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/strapdown.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

  var linkEl = document.createElement('link');
  linkEl.href = originBase + '/themes/bootstrap-responsive.min.css';
  linkEl.rel = 'stylesheet';
  document.head.appendChild(linkEl);

现在我想用 jQuery.getScript() 动态加载这个 javascript 文件：

$.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );

已加载 javascript 文件，但不会加载 css 文件。

当我直接在 html 文件中声明 css 文件时，它起作用了：

  <link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen" charset="utf-8">

但我想像以前一样动态地使用它。

这是缺少 css 文件的代码。可在 Github > test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
  <!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
  charset="utf-8"-->
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $.getScript("v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );
    }
    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

如何通过 jQuery.getScript() 加载的原始脚本动态加载 css 文件？

Answer 1

如果您尝试使用 Ajax 加载本地资源，您将面临浏览器安全问题。

这就是我在未经修改的情况下使用您的代码时遇到的情况。

这是我用来让它工作的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Jerik's this and that</title>
    <meta name="description" content="Some stuff that I want to mention" />
    <!-- added stylesheet manually, normaly strapdown does this for me autoamatically. Does not work now -->
    <!-- link rel="stylesheet" href="v/0.2/strapdown.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="v/0.2/themes/cerulean.min.css" type="text/css" media="screen" charset="utf-8">
    <link rel="stylesheet" href="v/0.2/themes/bootstrap-responsive.min.css" type="text/css" media="screen"
    charset="utf-8"-->
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
    <xmp theme="cerulean" style="display:none;"></xmp>
    <script type="text/javascript" charset="utf-8">
        // 
        // 

        function showmd( value ) { 
            $( "xmp" ).html( value );
            $.getScript("http://strapdownjs.com/v/0.2/strapdown.js").done( function(  ) { console.log( "loaded" ) } );
        }

        $.ajax({
            url: "https://raw.githubusercontent.com/jerik/jerik.github.io/master/readme.md",
            method: "GET",
            success: function(data) {
                showmd(data);
            }
        });
    </script>
</body>
</html>

Answer 2

找到了适用于 http 和 https 请求的解决方案。我创建了一个包含所需信息的 script 标签，并将其附加到 head 标签。 Firebugs 报告警告 Synchrone XMLHttpRequests in the Main-Thread should not be used... 但它对我有用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Jerik's this and that</title>
  <meta name="description" content="Some stuff that I want to mention" />
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<xmp theme="cerulean" style="display:none;"></xmp>
<script type="text/javascript" charset="utf-8">
    function showmd( value ) { 
        $( "xmp" ).html( value );
        $( 'head' ).append( '<script src="v/0.2/strapdown.js"><\/script>' );
    }

    $.get( "readme.md", function( data ) {
        showmd( data );
    }, 'text');
</script>
</body>
</html>

Answer 3

您必须下载 css，等待它完成下载并使用它

$.ajax({
        url: 'includes/page/message/index.css',
        dataType: 'text',
        success: () => {

            $("head").append("<link>");

            let css = $("head").children(":last");

            css.attr({

                rel: "stylesheet",
                type: "text/css",
                href: 'includes/page/message/index.css'

            });

        }
    });

通过 jQuery 动态加载 css 文件不起作用

dynamically load css files through jQuery does not work

html

javascript

css

jquery

getscript