通過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文件不起作用

回答

相關問題