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

回答

相关问题