Javascript和自適應設計

我的這段JavaScript是我的響應站點（見下文）。Javascript和自適應設計

簡而言之，當屏幕尺寸低於480（手機）時，我不希望它顯示（表示我不希望此JavaScript執行）。我會怎麼做？我嘗試使用display：none作爲它所在的div，但該腳本仍然執行並且Hello Bar仍顯示。有任何想法嗎？謝謝。

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>

這裏的網站：http://www.thesandiegocriminallawyer.com

這裏是HTML（接近底部）：

<div class="hello_bar"> 
<script src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js" type="text/javascript"> 
</div>

來源

2014-05-24 user3117275

代碼不足。你如何顯示：無'和什麼時候該代碼包含並執行？ – Popnoodles

抱歉不清楚。這段JavaScript放在頁面底部附近。這是一個通知欄。 – user3117275

看到這個http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml –

測量屏幕寬度，如果只重視了hellobar腳本其寬度大於480：

替換：

<script type="text/javascript" src="//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"></script>

有了：

<script type="text/javascript"> 
    var swidth = (window.innerWidth > 0) ? window.innerWidth : screen.width; 
    if (swidth > 480) { 
     var s = document.createElement("script"); 
     s.type = "text/javascript"; 
     s.src = "//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"; 
     document.getElementsByTagName('head')[0].appendChild(s); 
    } 
</script>

http://jsfiddle.net/xusH3/

來源

2014-05-24 15:09:28 Moob

嗨，我試過上面的代碼。但是，它現在完全不加載（甚至在桌面上）。任何想法爲什麼？ – user3117275

適合我。看到jsFiddle。 – Moob

我看到它在jsfiddle中有效。我需要將上面的代碼放在JavaScript標記中嗎？（請原諒我的無知）。 – user3117275

有2個解決方案，我能想到的：

加載腳本動態先檢查屏幕的寬度，然後加載文件如果需要，則採用異步方式
包裹在一個條件腳本文件，該文件是基於屏幕/文檔的寬度（該文件將被載入無論如何，但如果屏幕低於480不會運行任何東西）的含量

第一種方式是更好的，而如果你需要你的代碼可立即在頁面加載時

以異步方式加載腳本樣本是第二個可以解決頭痛：

<script> 
    function loadScript(url){ 
    var js, fjs = document.getElementsByTagName('script')[0]; 
    js = document.createElement('script'); 
    js.src = url; 
    fjs.parentNode.insertBefore(js, fjs); 
    }; 

    if(window.innerWidth>480){ //here you should check for the width (this check is not necessarily cross browser) 
     loadScript("//s3.amazonaws.com/scripts.hellobar.com/511972d9264fc5de88a0b9d919dc42d757a0d2ad.js"); 
    } 
</script>

來源

2014-05-24 15:09:55

也許我執行錯了。我將它剪切並粘貼到上面的div標籤中。現在它不顯示在桌面上。不知道我做錯了什麼。 – user3117275

哪個div？我猜你的意思是腳本標記 - 請檢查你的控制檯是否有錯誤，並將它們粘貼在這裏 –

@ user3117275我發現了問題...你應該嘗試編輯好的代碼..對不起 –

Javascript和自適應設計

回答

相關問題