Need a JavaScript solution to completely hide a portion of code in different screen devices

Question

I'm trying to integrate this JavaScript section with the correct width on mobile, desktop and tablet, so I wrote this:

this appears on mobile (using @media (min-width:...) in CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

this appears on tablet (using @media (min-width:...) in CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

this appears on desktop (using @media (min-width:...) in CSS)

<p align="center">News<script language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1050&amp;window=1"></script></p>

The problem is due to the variable "box" that is actually read 3 times by the browser, as each portion of code for mobile, tablet and pc are present and readable by the browser, it gets the last box value which sets the width to 250 that is ok for mobile, but not for desktop and tablet, so I need something to show the only portion of code that fits the device every time dynamically, how can I do?

Answer 1

Try:

var source_url, 
    script_element = document.createElement("script");

if(window.innerWidth > 1024) {
   script_element.src = "1024_script_source_url";
   console.log('loaded 1024 url, window width', window.innerWidth);
} else if (window.innerWidth > 600) {
   script_element.src = "600_script_source_url";
   console.log('loaded 1024 url, window width', window.innerWidth);
} 

document.head.append(script_element);

alert('done, window width' + window.innerWidth);

You'll probably want to subscribe to window resize event so...

window.onresize = function(event) {
//do something
};

Answer 2

I Solved Writing This:

<script type="text/javascript">
  if(window.innerWidth>1024){
    document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=1024&amp;window=1"\x3C/script>');
  }else if(window.innerWidth>600){document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=600&amp;window=1"\x3C/script>');}
  else{
  document.write('\x3Cscript language="JavaScript" type="text/javascript" charset="iso-8859-1" src="//www.intopic.it/iframe.php?cat=fonti-rinnovabili&amp;rootcat=tecnologia&amp;type=2&amp;bgcolor=FFFFFF&amp;bdcolor=FFFFFF&amp;lcolor=666666&amp;font=1&amp;fontsize=13&amp;box=250&amp;window=1"\x3C/script>');}
  </script>