根据浏览器大小从脚本更改 src答案

【问题标题】：change src from script which depend on the browser size根据浏览器大小从脚本更改 src
【发布时间】：2015-09-25 22:46:32
【问题描述】：

我的网站有点问题

我正在尝试根据脚本在 div 中的浏览器大小从我的脚本中更改 src 属性

这是代码的样子

<div style="margin: 15px 0px 0px; display: inline-block; text-align: center;">
<script id="world" type="text/javascript" src="http://localtimes.info/world_clock2.php?&cp1_Hex=ffd700&cp2_Hex=000000&cp3_Hex=000000&fwdt=72&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=21000&lcid=SNXX0006,USNY0996,UKXX0085,ASXX0112,HKXX0001"></script>
</div>

我正在尝试从脚本中更改 src，其中 src 本身包含我要根据浏览器大小更改的小部件的宽度（脚本中的 fwdt 值）

我正在尝试使用以下代码解决我的问题

    <script>
  var w = window.innerWidth;
  if (w>991) {
    document.getElementById("demo").innerHTML = "Width: " + w ;
    $('#world').attr('src','http://localtimes.info/world_clock2.php?&cp1_Hex=ffd700&cp2_Hex=000000&cp3_Hex=000000&fwdt=200&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=21000&lcid=SNXX0006,USNY0996,UKXX0085,ASXX0112,HKXX0001');
  }
  else if (w<991) {
    document.getElementById("demo").innerHTML = "Width: " + w ;
    $('#world').attr('src','http://localtimes.info/world_clock2.php?&cp1_Hex=ffd700&cp2_Hex=000000&cp3_Hex=000000&fwdt=100&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=21000&lcid=SNXX0006,USNY0996,UKXX0085,ASXX0112,HKXX0001');
  };
</script>

但是，我的代码对脚本 src 没有做任何事情

我从互联网上找到的是创建脚本本身，它使用 appendChild...但是， appendChild 使用标签名称工作，在我的情况下，我的脚本是来自 div 的子...

有办法解决吗？

新

    <script>
  var w = window.innerWidth;

  if (w>991) {
    document.getElementById("demo").innerHTML = "Width " + w;
    $('#asd').append('<script type=\"text\/javascript\" src=\"http:\/\/localtimes.info\/world_clock2.php?&cp1_Hex=ffd700&cp2_Hex=000000&cp3_Hex=000000&fwdt=100&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=21000&lcid=SNXX0006,USNY0996,UKXX0085,ASXX0112,HKXX0001\"><\/script>');
  }
  else if (w<991) {
    document.getElementById("demo").innerHTML = "Width " + w;
    $('#asd').append('<script type=\"text\/javascript\" src=\"http:\/\/localtimes.info\/world_clock2.php?&cp1_Hex=ffd700&cp2_Hex=000000&cp3_Hex=000000&fwdt=200&ham=0&hbg=0&hfg=0&sid=0&mon=0&wek=0&wkf=0&sep=0&widget_number=21000&lcid=SNXX0006,USNY0996,UKXX0085,ASXX0112,HKXX0001\"><\/script>');
  };

</script>

我尝试使用上面的代码，但它也不起作用

它只显示宽度数字，但附加功能不做任何事情

“asd”是div的id

还有其他解决办法吗？

【问题讨论】：

appendChild 也可以为 div 调用，因此您可以查找 div 并将脚本标记附加到它的子级。但我怀疑这是否是正确的方法。我会按原样下载脚本，并让脚本本身根据屏幕分辨率进行配置。我认为下载不同分辨率的不同脚本会产生不必要的复杂性并产生开销。也许对脚本内容的一些了解将使我们能够更详细地建议您如何使其适用于多种屏幕尺寸。
@Budi Wijaya - 您不需要将 \ 放在双引号前面。您在脚本标签周围有单引号，因此不需要。

标签： javascript jquery html src

【解决方案1】：

脚本标签的SRC属性只能设置一次。您已经以编程方式附加了新的脚本标签。

看到这个答案Changing "src" attribute of <script>

【讨论】：

【解决方案2】：

这个解决方案怎么样：

<div id="container" style="margin: 15px 0px 0px; display: inline-block; text-align: center;">
    <script id="world" type="text/javascript" src="<your src>"></script>
</div>





var w = window.innerWidth;
  $("#demo").html("Width: " + w);
  $("#world").remove();
  if (w > 991) {
      $('#container').append('<script id="world" type="text/javascript" src="<your src>"></script>');
  }
  else if (w < 991) {
      $('#container').append('<script id="world" type="text/javascript" src="<your src>"></script>');
  };

【讨论】：

您确定将 id="container" 添加到 div 保存脚本中吗？如果是，请将您的代码发布在小提琴上，我会检查。