Javascript代碼來改變HTML內容

每個人...有一個美好的一天... 我想問一下，我正在做一個代碼來改變一些JavaScript文件從頭文件的HTML部分，當瀏覽器寬度得到了不同的決議更改...但它似乎並沒有工作... 如果你們告訴我什麼是這個代碼中的問題，這將是對我真的很有幫助..謝謝...Javascript代碼來改變HTML內容

這是代碼...

 <script id="size-banner" type="text/javascript" src=" "></script> 

     <script type="text/javascript"> 
      function adjustBanner(width) { 
        width = parseInt(width); 
        if (width < 701) { 
         $("#size-banner").attr("src", " "); 
        } else if ((width >= 960) && (width < 1280)) { 
         $("#size-banner").attr("src", "edge_includes/index_edgePreload.js"); 
        } else { 
         $("#size-banner").attr("src", "edge_includes/index1250_edgePreload.js"); 
        } 
       } 

       $(function() { 
        adjustBanner($(this).width()); 
        $(window).resize(function() { 
         adjustBanner($(this).width()); 
        }); 
       }); 
     </script>

來源

2013-08-16 Mtkhan

請描述「不工作」。 – Mathletics

它假設更改文件但不更改（）腳本標記的src。 – Mtkhan

所以我做什麼加載新腳本 – Mtkhan

如果您確實想要在頁面加載後將腳本添加到頁面中，則以下代碼將起作用：

(function() { 
    var po = document.createElement('script'); 
    po.type = 'text/javascript'; po.async = true; 
    po.src = 'http://pathtoyourscript.com/script.js'; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(po, s); 
})();

你最終adjustBanner功能會是這樣的：

function adjustBanner(width) { 
    width = parseInt(width); 

    var src = ' '; 
    if ((width >= 960) && (width < 1280)) { 
    src = 'edge_includes/index_edgePreload.js'; 
    } else if (width >= 1280) { 
    src = 'edge_includes/index1250_edgePreload.js'; 
    } 

    var po = document.createElement('script'); 
    po.type = 'text/javascript'; po.async = true; 
    po.src = src; 
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(po, s); 
}

這段代碼做的是附加的腳本代碼到你的頁面，從而導致你的瀏覽器立即加載它。腳本加載時，瀏覽器中的JavaScript解釋器將繼續並運行腳本源。如果您使用JavaScript修改或修改變量，全局或模塊，只要JavaScript解釋器接收到源，該修改就會發生。

取決於你的腳本源在做什麼，你可能要小心調用此上每 window.resize事件沒有清理舊腳本（例如設置模塊，以基金）。這是因爲每次調整窗口大小時，與當前分辨率相關的腳本都會附加到文檔源中，從而改變已經在JavaScript上下文中設置的所有變量。

叫我瘋了，但你可能要考慮使用CSS media queries而不是JavaScript/jQuery來完成你想要的。您可以爲特定分辨率定義樣式，然後魔術般地瀏覽器根據當前窗口的分辨率來做正確的事情。您的條件加載腳本（運行動畫）需要具有解析能力，但這似乎比在頁面上交換JavaScript更好。

作爲一個例子：

<html>                   
    <style>                  
    @media (max-width: 700px){             
     #smallCage { display: block; }            
     #mediumCage { display: none; }            
     #largeCage { display: none; }            
    }                   
    @media all and (min-width: 701px) and (max-width: 1000px) {     
     #smallCage { display: none; }            
     #mediumCage { display: block; }           
     #largeCage { display: none; }            
    }                   
    @media all and (min-width: 1001px) {           
     #smallCage { display: none; }            
     #mediumCage { display: none; }            
     #largeCage { display: block; }            
    }                   
    </style>                  
    <body>                   
    <div id="smallCage">               
     <img src="http://www.placecage.com/200/300" />        
    </div>                  
    <div id="mediumCage">              
     <img src="http://www.placecage.com/400/600" />        
    </div>                  
    <div id="largeCage">               
     <img src="http://www.placecage.com/800/1200" />       
    </div>                  
    </body>                  
</html>

在本例中，我有3個不同大小的圖像，並基於所述瀏覽器的分辨率可以選擇性地呈現它們。你可以用canvas元素或者你爲JS動畫使用的任何東西做同樣的事情。

最後的選擇是讓實際執行動畫的JavaScript知道瀏覽器寬度，然後在屏幕調整大小時做正確的事情。

來源

2013-08-16 23:41:14 class

雅但不知道如何通過CSS媒體查詢來改變js文件 – Mtkhan

你是對的，但我不想改變樣式我想改變Javascript代碼以根據顯示大小運行。實際上它是爲其中的一些圖形元素製作動畫的橫幅。做樣式...感謝您的幫助.. – Mtkhan

我已經更新了代碼的基礎上加載一個腳本的瀏覽器寬度的答案，但有一些影響，你需要考慮。 – class

Javascript代碼來改變HTML內容

回答

相關問題