-1

In a JSP file, I have the following line:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

Is there a way to only do that line if a JS variable (XY.isChina) is false?

Perhaps, can I do something like this with nesting?

<script>
  if (XY.isChina === false) {
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
  }
</script>

I thought perhaps I could do something like this:

<script>
    type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?sensor=false"
</script>

But that seems to not work. Because then I could have just gone to:

<script>
  if (XY.isChina === false) {
    type="text/javascript"
    src="//maps.googleapis.com/maps/api/js?sensor=false"
  }
</script>

Does anyone know the correct way to do that?

iMatthewCM
  • 449
  • 2
  • 10
  • 21
  • check document.createElement – caub Dec 12 '15 at 23:22
  • @Gothdo In the time it took you to link those, you could have written a helpful answer like a community member beneath did. I was unable to find anything that addressed this particular situation, so that's why I posed the question. – iMatthewCM Dec 13 '15 at 04:09

1 Answers1

1

There are several choices. You can document.write() the script into the HTML or you can dynamically load the script. Here's one example:

<script>
  if (XY.isChina === false) {
      document.write('<scr' + 'ipt type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></scr' + 'ipt>');

  }
</script>

You can dynamically load a script at any time like this:

function loadScript(url, callback) {
    var script = document.createElement("script");
    if (callback) {
        script.onload = callback;
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

Dynamically loading like this causes the script to be loaded asynchronously (the page loading and other scripts do not wait for this script to load) so it will be completed at some indeterminate time in the future.

You could use this in your code like this:

<script>
  if (XY.isChina === false) {
      loadScript("//maps.googleapis.com/maps/api/js?sensor=false");
  }
</script>

Using document.write() prevents some page loading optimizations in modern browsers so it is generally best to find a different way if possible, but if you want a blocking, synchronous load of the script using document.write() is the simplest way to conditionally load a script.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • This is great, thank you very much. Is there any reason you separated the word "script" in there? Does it do something funky with the word "script?" – iMatthewCM Dec 13 '15 at 04:07
  • 1
    @Joodoo - You can read [here](http://stackoverflow.com/questions/236073/why-split-the-script-tag-when-writing-it-with-document-write) about why it's broken apart. I think that technically, only the `` has to broken apart. – jfriend00 Dec 13 '15 at 04:12
  • Thanks! Always like learning new stuff. Few quirks to work out with load times, but I think this approach is the winner. – iMatthewCM Dec 13 '15 at 04:17
  • Any thoughts as to why mobile Safari (iOS) turns its nose up at that? – iMatthewCM Dec 13 '15 at 04:33
  • Answered my own question: http://stackoverflow.com/questions/4814217/woes-of-safaris-javascript-with-document-write – iMatthewCM Dec 13 '15 at 04:39