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

【问题标题】：dynamically load css files through jQuery does not work通过jQuery动态加载css文件不起作用
【发布时间】：2016-06-07 12:01:18
【问题描述】：

通常我在 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 文件？

【问题讨论】：

您的实际问题是什么？您的代码已加载 css 文件。
我下载了github上的所有文件，在本地打开。它给出了关于不允许加载的本地资源的错误。所以，我修改了readme.md（指向github）和strapdown.js（指向官方捷联网站）的URL，一切正常。
好提示。 strapdown.js 根据link 标签的href 属性确定css 文件的位置。由于通过 jQuery 加载它时不存在，它无法找到 css 文件。它通过使用strapdown.js的完整URL以某种方式解决。

标签： javascript jquery html css getscript

【解决方案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">
        // http://stackoverflow.com/questions/11917734/jquery-ajax-call-success-how-do-i-change-a-global-variable-in-the-wrapper-javas
        // http://stackoverflow.com/questions/7598821/return-responsetext-from-jquery-get

        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>

【讨论】：

我使用strapdown.js 和$.getScript("http://strapdownjs.com/v/0.2/strapdown.js") 的完整URL 就足够了
似乎不适用于 https，仅适用于 http。使用 https 我收到错误消息 loading of mixed active content http://....strapdown.js was blocked。 further information mixed content

【解决方案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>

【讨论】：

【解决方案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'

            });

        }
    });

【讨论】：