Question

我有一个脚本：

<script src="http://192.168.0.187:3004/socket.io/socket.io.js"></script>

我无法控制IP地址的更改，因此我正在考虑动态IP。

赞：

<script src="http://" + location.host + "/socket.io/socket.io.js"></script>

但是这当然行不通。

但是我确实遇到了这个问题：

<script type="text/javascript" src="">
    document.getElementsByTagName("script")[0].src += "http://" + location.host + "/socket.io/socket.io.js";
</script>

但是仍然不起作用。这不是我的强项，有什么线索吗？

编辑：

这是我的html示例：

<!DOCTYPE html>
<html>
  <head>
    <title>SAMPLE</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script id="script" src=""></script>
    <script type="text/javascript">
      document.getElementById("script").src = "http://" + location.host + "/socket.io/socket.io.js";
    </script>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body bgcolor="#ffffff">
    <table id="table" border=1>
      <thead>
        <th><center>Sample</center></th>
        <th></th>
      </thead>
      <tbody id="online"></tbody>
    </table>
    <script>
      var ipServer = location.host;
      var socket = io.connect('ws://' + ipServer);
    </script>
  </body>
</html>

Answer 1

这是动态加载javascript的调用：

var script = document.createElement('script');
script.setAttribute( 'src', 'socket.io.js');
document.head.appendChild(script);
//script that use socket.io

但是，当脚本完全加载时，您还不知道另一个问题。如果您调用的函数是在加载前在外部脚本中定义的，那就是错误的！

var script = document.createElement('script');
script.onload = function () {
    //script that use socket.io
};
script.setAttribute( 'src', 'socket.io.js');
document.head.appendChild(script);

我们可以创建一个实用函数：

function loadScript(scriptPath, callback) {
    var script= document.createElement('script');
    script.setAttribute('src', scriptPath);
    script.onload = callback();
    document.head.appendChild(s);
};

loadScript('socket.io.js', function() {
    //script that use socket.io
});

或者您可以使用jQuery $ .getScript（）：

$.getScript('socket.io.js', function(data, textStatus, jqxhr) {
    //script that use socket.io
});

有关更多信息：https://api.jquery.com/jquery.getscript/

PS：使用您的代码，将像这样：

<!DOCTYPE html>
    <html>
    <head>
        <title>SAMPLE</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script id="script" src=""></script>
        <!--<script type="text/javascript">-->
            <!--document.getElementById("script").src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js";-->
        <!--</script>-->
        <!--<link rel="stylesheet" href="/styles.css">-->
    </head>
    <body bgcolor="#ffffff">
    <table id="table" border=1>
        <thead>
        <th><center>Sample</center></th>
        <th></th>
        </thead>
        <tbody id="online"></tbody>
    </table>
    <script>
        var script = document.createElement('script');
        script.onload = function () {
            var ipServer = location.host;
            var socket = io.connect('ws://' + ipServer);
        };
        script.setAttribute( 'src', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js');
        document.head.appendChild(script);
    </script>
    </body>
    </html>

Answer 2

您有正确的想法；问题是您不能将外部脚本（使用src与内联脚本组合在一起。

为此，您仅需要两个不同的脚本，请确保内联脚本位于引用外部脚本之后：

<script src=""></script>

<script type="text/javascript">
    document.getElementsByTagName("script")[0].src = "http://" + location.host + "/socket.io/socket.io.js";
</script>

Answer 3

您可以使用document write加载脚本。

<script type='text/javascript'>
    var script = '<script type="text/javascript" src="http://' + location.host + '/socket.io/socket.io.js"><\/script>';
    document.write(script);
</script>

脚本标记中的HTML中的Dynamic Src

3 个答案: