我正在试图弄清楚如何编写以下内容,仅在窗口宽度为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>
其他有效的简化解决方案吗?
答案 0 :(得分:0)
因为您无法将脚本标记附加为字符串(至少在没有拆分字符串的情况下),因为浏览器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);
}