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 Как исправить данный конфликт не пойму.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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