使用javascript加載不同的CSS樣式表

Question

我需要使用javascript根據傳遞的URL變量加載不同的樣式表。

場景是這樣的：我們需要維護一個移動網站，其中包含一個CSS樣式表，以及一個不同的樣式表，當通過iOS應用程序中加載的Web視圖訪問該樣式表時，該樣式表將用於設置同一頁面的樣式。

如果您查看www.blog.meetcody.com，您會發現我們已經在使用媒體查詢和響應式網頁設計。 這對我們來說不充分的原因是因為媒體查詢無法檢測是否通過本機應用程序中的webview加載頁面而不是移動Safari。 我們需要分別處理這兩種情況。 該博客是一個托管的wordpress博客，我們通過iOS應用程序中的JSON API訪問。

我們處理此問題的方式如下：當通過我們的iOS應用程序加載網頁時，我們將一個變量附加到URL“/？app = true”的末尾。 我想要做的是檢查URL是否包含此字符串，如果是，請使用不同的webview。

我試圖使用以下代碼執行此操作：

    <script language="javascript" type="text/javascript">
    if(window.location.href.indexOf('/?app=true') > -1) {

        document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"http://blog.meetcody.com/wp-content/themes/standard/appstyle.css\" />");
    }
    document.close(); 
</script>

我遇到的問題是，當app = true是URL的一部分時，上面的代碼實際上並沒有加載appstyle.css樣式表。

如果您查看http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2，您可以看到我通過設置背景來測試它： body {}標簽

body {
background: black;
}

然而，在http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2的style.css中，正文背景顏色為＃F2F0EB; 在body {}標簽中

    body {
        background: #F2F0EB;
   }

當然，我們想做的不僅僅是改變背景顏色，但我只是把它作為一個例子。

有沒有更好的方法來做到這一點，或者我的代碼有什么問題？ 也許我不能在javascipt中使用直接鏈接到appstyle.css和href？ 非常感謝。 祝聖誕快樂！

Answer 1

您可以使用appendChild（）添加CSS樣式表，如下所示：

 var header = $.getElementsByTagName('head')[0];
 var styleSheet = $.createElement('link');
 styleSheet.rel = 'stylesheet';
 styleSheet.type = 'text/css';
 styleSheet.href = 'style.css'; // name of your css file
 styleSheet.media = 'all';
 header.appendChild(styleSheet);

當然，您可以通過執行以下操作來更改此示例以根據當前URL容納不同的css文件名：

 styleSheet.href = (isMobile == true) ? 'mobile.css' : 'default.css';

Answer 2

使用內聯腳本時，切勿嘗試關閉文檔。 只有在document.write到iframe，框架或新窗口時才需要document.close

另外我建議你測試location.search而不是href，因為那是你放置旗幟的地方。

請試試

<script language="javascript" type="text/javascript">
if (location.search.indexOf('app=true') > -1) {
  document.write('<link rel="stylesheet" type="text/css" href="http://blog.meetcody.com/wp-content/themes/standard/appstyle.css" />');
}
</script>

並且可能將該腳本放在其他樣式表之后，如果要覆蓋在您的站點中的10多張表中設置的內容，或者更好：在服務器上測試查詢字符串，或者將查詢字符串設置為app = yes ，在會話中設置一些東西或類似的東西，並使用它在服務器上包含正確的CSS而不是依賴JS

PS：您的身體標簽在您的主頁上有主頁和博客類。 我建議你看看上面提到的樣式表，看看那些類的顏色是什么。

PPS：我在這里看不到任何媒體檢測

<link rel='stylesheet' id='standard-activity-tabs-css'  href='/wp-content/themes/standard/lib/activity/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='gcse-widget-css'  href='/wp-content/themes/standard/lib/google-custom-search/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-300x250-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-300x250/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-125x125-widget-css'  href='/wp-content/themes/standard/lib/standard-ad-125x125/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-ad-468x60-css'  href='/wp-content/themes/standard/lib/standard-ad-billboard/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-personal-image-widget-css'  href='/wp-content/themes/standard/lib/personal-image/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-influence-css'  href='/wp-content/themes/standard/lib/influence/css/widget.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='/wp-content/themes/standard/css/lib/bootstrap.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-responsive-css'  href='/wp-content/themes/standard/css/lib/bootstrap-responsive.css?ver=3.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='standard-css'  href='/wp-content/themes/standard/style.css?ver=3.4.2' type='text/css' media='all' />