0

Сайт с подключенным jquery 3.2.1 Подключается скрипт погоды для сайта. Но на мобильной версии, а точнее, при разрешении < 768px он не нужен.

В js не силен, сделал так:

<script>
    if ($(window).width() > 767) {
      var script = document.createElement('script');
      script.src = 'https://world-weather.ru/wwinformer.php?userid=652bb65a954269a0b0c2530863b58521';
      document.head.appendChild(script);

    }
</script>

Правильно ли это? и можно ли(нужно ли) сделать загрузку этого скрипта с параметром async?

И второй вопрос: В коде сайта, в блок div с класом .topbar-right вставляется код вывода погоды:

<div id="652bb65a954269a0b0c2530863b58521" class="ww-informers-box-854753" style="-webkit-transform:rotateY(90deg);transform:rotateY(90deg);color:#37404d;">
                    <p><a title="Погода в Бийске" rel="nofollow" target="_blank" href="https://world-weather.ru/pogoda/russia/novokuznetsk/">Погода в Новокузнецке</a></p>
</div>

Как сделать, .чтобы этот код вставлялся в нужный блок div так же, при определенном разрешении экрана, при том же, при котором загружается скрипт погоды?


PS Немножко переделал по другому, добавил async.

<script>
$(document).ready(function(){
    if ((window).innerWidth > 767) {
     /* добавляем теги скрипт для загрузки внешнего сервиса */
    var scriptService = document.createElement('script');
    scriptService .src = "https://world-weather.ru/wwinformer.php?userid=652bb65a954269a0b0c2530863b58521";
    scriptService.async = 'true';
    document.documentElement.appendChild(scriptService );
    }
});
</script>

Так будет лучше? Но со вставкой html еще не разобрался(

0

2 ответа 2

0

Скрипт вы добавили, осталось добавить разметку в ifе, который вы уже написали, для этого подготовьте пустой div с id="weather" в том месте, где будет виджет.

а затем добавьте в ваш if, который проверяет разрешение экрана что-то такое

document.querySelector("#weather").innerHTML = `<div id="652bb65a954269a0b0c2530863b58521" class="ww-informers-box-854753" style="-webkit-transform:rotateY(90deg);transform:rotateY(90deg);color:#37404d;"><p><a title="Погода в Бийске" rel="nofollow" target="_blank" href="https://world-weather.ru/pogoda/russia/novokuznetsk/">Погода в Новокузнецке</a></p></div>`;

или же Вы можете создавать элементы через document.createElement(), и добавлять через appendChild , это правильнее, т.к. прямое изменение innerHTML может иметь нежелательные последствия

1
  • Спасибо! Сделал как вы посоветовали. с версиями jquery есть конфликты, а так, с 3.2.1 код рабочий 21 апр 2019 в 12:56
0

Сделал так:

<script>
$(document).ready(function(){
    if ((window).innerWidth > 767) {
    var newWeather = document.createElement ('div');
        newWeather.className = 'weather-block';
        newWeather.innerHTML = '<div id="652bb65a954269a0b0c2530863b58521" class="ww-informers-box-854753" style="-webkit-transform:rotateY(90deg);transform:rotateY(90deg);color:#37404d;"><p><a title="Погода в Новокузнецке" rel="nofollow" target="_blank" href="https://world-weather.ru/pogoda/russia/novokuznetsk/">Погода в Новокузнецке</a></p></div>';
    var container = document.getElementById ('weather');
        container.appendChild (newWeather);
    /* добавляем теги скрипт для загрузки внешнего сервиса */
    var scriptService = document.createElement('script');
    scriptService .src = "https://world-weather.ru/wwinformer.php?userid=652bb65a954269a0b0c2530863b58521";
    scriptService.async = 'true';
    document.documentElement.appendChild(scriptService);
    }
});
</script>

Отображается без конфликтов, кроме одной страницы, где пересекаются несколько разных версий jquery - https://avtonkz.ru/mezhgorod Как исправить данный конфликт не пойму.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.