Dynamic Src in HTML in a Script Tag

Question

I have a script:

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

The IP Address is subject to change which I have no control of, so I'm thinking of having the IP dynamic.

Like this:

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

But of course this doesn't work.

I did however came across this:

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

But still doesn't work. This is not my strongest point so, any clue?

EDIT:

Here is the sample of my 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>

You should see if you could disable DHCP from the target IP and then make it static. — Simon Jensen
– Simon Jensen, Commented Sep 6, 2018 at 5:44
@SimonJensen - So that the IP would no longer change? I want to solve this thinking that the IP is subject to change. Actually, that's the case as this is the client's limitation which I have to adjust to, sadly. — DayIsGreen
– DayIsGreen, Commented Sep 6, 2018 at 5:50

yelliver · Accepted Answer · 2018-09-06 07:23:01Z

5

This is call dynamically loading javascript:

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

But there's another problem that you don't know when the script is fully loaded. If you call a function is defined in external script before it's loaded, it's error!

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

And we can make a utility function:

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
});

OR you can use jQuery $.getScript():

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

For more information: https://api.jquery.com/jquery.getscript/

PS: with your code, it will be like this:

<!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>

edited Sep 6, 2018 at 7:23

answered Sep 6, 2018 at 4:05

yelliver

5,9765 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DayIsGreen Over a year ago

Thanks for you answering! I wanna do something simple similar to what @Obsidian Age answered, however I still encountered an issue 'io is not defined'. I've added my HTML for reference. Also, instead of using ByTagName, i used ID to have the changes have an effect only on one specific script tag. Still won't work though. Any ideas?

DayIsGreen Over a year ago

Yeah I did however it resulted into an error, which I assumed I was doing it wrong. That's why I wanna do something a little too simple. What I did was based on the html (edit) in my question, I added the data from the script (the one with two declaration of 'var') inside your 2nd code of block specifically inside where you commented '//script that use socket.io'.

yelliver Over a year ago

@DayIsGreen I am afraid of that when you edit the src of html, it does not load the script, in my solution, the script will be load when call appendChild()

DayIsGreen Over a year ago

I'm not much of a front end programmer but, I have the same thoughts. that said, when i tried adjusting my codes, i get the message 'Refused to execute script from '192.168.0.187:3004/socket.io.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.'; I am totally clueless if i'm doing this right, but what i did was, inside the script tags, i added your 2nd block, where in inside the comment section, i added my supposed codes to which in my understanding from your previous comment, will be called as it is now called 'script'.

yelliver Over a year ago

@DayIsGreen I have updated my answer from you code, pls check it

|

Oram · Accepted Answer · 2018-09-06 07:24:29Z

1

You can use document write to load the script.

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

answered Sep 6, 2018 at 7:24

Oram

1,7012 gold badges19 silver badges24 bronze badges

Comments

Obsidian Age · Accepted Answer · 2018-09-06 03:46:05Z

0

You have the right idea; the problem is that you can't combine an external script (using src) with an inline one.

You simply need two different scripts for this, making sure the inline one comes after the reference to an external script:

<script src=""></script>

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

answered Sep 6, 2018 at 3:46

Obsidian Age

42.6k11 gold badges54 silver badges76 bronze badges

2 Comments

DayIsGreen Over a year ago

Thanks for replying! I adjusted my codes and it didn't work. So instead of using ByTagName, i used ID but still failed. I've posted the sample of my html. By pressing F12, console says I'm having issue with the line: var socket = io.connect('ws://' + ipServer); as io was not declared or something. It seems my changes didn't work.

DayIsGreen Over a year ago

Also, I've added the my html as sample for reference. I've changed the tag from name to ID as i think it may cause changes in all script tags, so i used ID instead to have the changes focused on one specific script tag

Collectives™ on Stack Overflow

Dynamic Src in HTML in a Script Tag

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related