How to Conditionally Load JS Based on Screen Size

Any suggestions for a very real

[webcentric]

OK, first I've done a significant amount of search here on WW and on the Internet and have yet to find a suitable answer to the problem.

I'm attempting to put an Amazon widget on a responsive web page. The widget code is a script block pointing to an external file on Amazon which renders a specific size widget. This is fine for a single device (say a desktop computer) but the minute the page is loaded by a tablet or phone, the widget is an inappropriate size for the device so, I want to be able to load a different widget based on the size of the device.

I can do this with IFrame widgets by setting their source like this

<iframe src="" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" id="responsiveIFRAME"></iframe>

<script type="text/javascript">

  width = document.documentElement.clientWidth;
  var link = "iFrameSrcHere"
  if (width > 500) {
    document.getElementById("responsiveIFRAME").setAttribute('src', link);
  }

...more conditions.

</script>

I'm definitely no JavaScript wiz so this is already taxing my brain so loading an entire script block is way outside my comfort zone. Not sure if document.write is the way to go or if setting the script source is possible or cross-browser compliant enough for my needs. Any suggestions are welcome. This would be an example of what I need to load dynamically.

<SCRIPT charset="utf-8" type="text/javascript" src="scriptSrcHere"> </SCRIPT> <NOSCRIPT><A HREF="noScriptURLHere">Amazon.com Widgets</A></NOSCRIPT>

I'm sure I could simply but three widgets on the page and show or hide them with media queries but that doesn't stop unnecessary JS from loading which is the goal here.

Thanks for any pointers on this.

[daveVk]

<SCRIPT charset="utf-8" type="text/javascript" src="scriptSrcHere"> </SCRIPT> <NOSCRIPT><A HREF="noScriptURLHere">Amazon.com Widgets</A></NOSCRIPT>

This seems to be designed to be placed within the HTML where the widget is required. In that case, document.write should work OK.

<script type="text/javascript">
var insert;
var width = document.documentElement.clientWidth;
if (width > 500) {
insert = '<SCRIPT ... >';
}
...more conditions.
document.write(insert);
</script><NOSCRIPT><A HREF="noScriptURLHere">Amazon.com Widgets</A></NOSCRIPT>

[webcentric]

@daveVk Thanks for pointing me in a solid direction.

Seems you're example would result in nested script tags which I didn't know was possible. Searching that concept does produce a number of results like this though

<script type="text/javascript"><!--
document.write('<scr'+'ipt type="text/javascript">');
document.write('alert("Hello");');
document.write('</scr'+'ipt>');
//--></script>

I'm guessing that the concatenation of the start and end tag is to keep the outer script tag from parsing the inner as plain text or to take advantage of the fact that that's what it is doing.

[Fotiman]

Remove the HTML comments (<!-- and -->) from within the script tag, though. That's an old leftover that hasn't been needed for over 15 years.

Also, you don't NEED to use document.write. In fact, use of document.write is discouraged in favor of DOM methods, like document.createElement and setAttribute and appendChild.

[webcentric]

Thanks Fotiman

I've seen examples of what you describe for writing scripts to HEAD but not to anywhere else on the page so I'll do a bit more research along those lines and see what it brings me. I guess one question would be if it would be better to start with an empty script tag (with an id) where I want the script to be on the page and then use the methods you suggest to change attributes, ect. as needed or should I just write the whole script block at one time to my desired location.

Thanks again.

[Fotiman]

I'd just write the whole script to the desired location. That will keep your markup as clean as possible (good separation of content/HTML vs. behavior/script).

[webcentric]

Thanks Fotiman, I'm gonna give your suggestion a try.

[daveVk]

If the Amazon script is using document.write() or other techniques to append code to the body, changing the src at a latter stage may be a problem.

Experiment a bit to see what works, document.write() is dirty, but so are a lot of the Ad scripts.