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

Normaly我加载HTML中的JavaScript文件：通过jQuery的动态加载CSS文件不起作用

<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>

我如何获得通过原始脚本动态加载的css文件，我通过jQuery.getScript加载（）？

来源

2016-06-07 jerik

你的实际问题是什么？你的代码已经加载了css文件。 – weigreen

我下载了github上的所有文件并在本地打开。它给出了有关加载本地资源的错误是不允许的。所以，我修改了'readme.md'（指向github）和'strapdown.js'（指向官方捷联网站）的URL并且一切工作正常。 –

好的提示。 'strapdown.js'根据'link'标签的'href'属性来计算出css文件的位置。由于在通过jQuery加载时不存在，所以无法找到css文件。它以某种方式通过使用'strapdown.js'的完整URL解决。 – jerik

如果您尝试使用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>

来源

2016-06-07 12:25:20

用'.getScript（“http://strapdownjs.com/v/0.2/strapdown.js”）使用'strapdown.js'的完整URL对于我来说就足够了'' – jerik

似乎不能工作https，只在http上。使用https，我收到错误消息'加载混合活动内容http：//....strapdown.js被阻止。 [更多信息混合内容]（https://developer.mozilla.org/en-US/docs/Security/Mixed_content） – jerik

发现，HTTP和HTTPS请求有效的解决方案。我使用所需的信息创建了script标签，并将其附加到head标签。 Firebugs报告了一个ware 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>

来源

2016-06-07 20:24:52 jerik

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

回答

相关问题