Javascript 根據屏幕大小編寫新的 javascript 鏈接

Question

我試圖弄清楚如何編寫以下內容，僅當窗口寬度大小為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>之前

任何其他有效的簡化解決方案？

Answer 1

由於瀏覽器 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);
}