Нужно решение JavaScript, чтобы полностью скрыть часть кода на разных устройствах экрана - PullRequest
Новая
       39

Нужно решение JavaScript, чтобы полностью скрыть часть кода на разных устройствах экрана

0 голосов
/ 19 ноября 2018

Я пытаюсь объединить этот раздел javascript с правильной шириной на мобильных устройствах, компьютерах и планшетах, поэтому я написал следующее:

это появляется на мобильных устройствах (используя @media (min-width: ...) в 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>

это появляется на планшете (используя @media (min-width: ...) в 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>

это появляется на рабочем столе (используя @media(min-width: ...) в 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>

Проблема связана с переменной «box», которая фактически читается браузером 3 раза, как каждая часть кода для мобильного устройства, планшетаи ПК присутствуют и читаются браузером, он получает значение последней ячейки, которое устанавливает ширину 250, которая подходит для мобильных устройств, но не для настольных компьютеров и планшетов, поэтому мне нужно что-то, чтобы показать единственную часть кода, которая соответствует устройствукаждый раз динамически, как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Я решил написать это: 

<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>
0 голосов
/ 19 ноября 2018

Попробуйте: 

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

Возможно, вы захотите подписаться на событие изменения размера окна, так что ... 

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