Javascript根据屏幕大小编写新的Javascript链接

Javascript write new javascript links based on screen size

本文关键字：Javascript 链接 屏幕      更新时间：2024-07-01

我正试图弄清楚如何编写以下内容，仅当窗口宽度大小为480或更小时。

<%= javascript_include_tag 'idangerous.js' %>
<%= javascript_include_tag 'custom.js' %>
<%= stylesheet_link_tag 'idangerous.swiper' %>

到目前为止，我有以下内容：

<script type="text/javascript">
$(function () {
  var width = $(window).width();
  if (width <= 480) {
    _output.innerHTML = "<%= javascript_include_tag 'idangerous.js' %>";
    _output.innerHTML = "<%= javascript_include_tag 'custom.js' %>";
    _output.innerHTML = "<%= stylesheet_link_tag 'idangerous.swiper' %>";
  }
});
</script>

但是这不起作用，我不想使用document.write。我也尝试在标题中添加，但我希望在</body> 之前将其写在页面底部

还有其他有效的简化解决方案吗？

由于浏览器HTML解析器将看到字符串中的</script>，并将其解释为脚本元素的末尾，因此您不能将脚本标记附加为字符串（至少不能不拆分字符串），因此必须动态创建它们

if (window.clientWidth <= 480) {
    var scripts = ['idangerous.js', 'custom.js', 'idangerous.swiper'];
    for (var i=0; i<scripts.length; i++) {
        addScript(scripts[i])
    }
}
function addScript(src) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = src;
   head.appendChild(script);
}
相关文章：