homepage Welcome to WebmasterWorld Guest from 54.205.197.66
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to Conditionally Load JS Based on Screen Size
Any suggestions for a very real
webcentric




msg:4603027
 5:24 pm on Aug 18, 2013 (gmt 0)

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




msg:4603154
 5:57 am on Aug 19, 2013 (gmt 0)

<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




msg:4603269
 1:46 pm on Aug 19, 2013 (gmt 0)

@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




msg:4603281
 2:21 pm on Aug 19, 2013 (gmt 0)

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




msg:4603290
 2:57 pm on Aug 19, 2013 (gmt 0)

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




msg:4603302
 3:35 pm on Aug 19, 2013 (gmt 0)

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




msg:4603351
 6:00 pm on Aug 19, 2013 (gmt 0)

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

daveVk




msg:4603494
 3:33 am on Aug 20, 2013 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved