Функция .html('') не видит полностью код?

Question

[Alex Ivanov]

Добрый вечер, всем!
Скажите пожалуйста, функция .html() почему не видит весь код? Т.е. в консоле выдает ошибку.
Написал скрипт для оптимизации карты и поместил его в файл script.js

var reservation = $('.reservation');
    var reservationTop = reservation.offset().top;
    $(window).bind('scroll', function () {
        var windowTop = $(this).scrollTop();
        if (windowTop > reservationTop) {
            $('.map').html('<script charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A45374b4f36193c2c3bb5a22a9bffed35b78e3e041596ce43450258bbf7529fad&amp;width=100%25&amp;height=598&amp;lang=ru_UA&amp;scroll=false"> </script>')
            $(window).unbind('scroll')
        } 
    });

НО как оказалось, по заданию этот скрипт мне необходим в самом файле index.html

Когда вставил этот код в index.html, то в консоле выдает ошибку:
Uncaught SyntaxError: Invalid or unexpected token

Кусок кода подчеркивает красным
обычным цветом, как будто закрывающая скобка функций .html('') не видит код

В чем беда?
За ранее благодарен!!!

Answer 1

[Дмитрий Беляев]

Во-первых, если js внутри html, то строки содержащие </script> нужно разбивать:

$('.map').html('<script charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A45374b4f36193c2c3bb5a22a9bffed35b78e3e041596ce43450258bbf7529fad&amp;width=100%25&amp;height=598&amp;lang=ru_UA&amp;scroll=false"> </sc' + 'ript>')

Во-вторых, не уверен, что jQuery настолько умный, чтоб автоматом нормализовать вставку скрипта, по этому меняем эту строку так:

var script = document.createElement('script');
script.async = true;
script.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A45374b4f36193c2c3bb5a22a9bffed35b78e3e041596ce43450258bbf7529fad&width=100%25&height=598&lang=ru_UA&scroll=false';
$('.map').append(script);

Comments

[Alex Ivanov]

Большое Вам спасибо!
Всё работает!

Answer 2

[DanKud]

Экранируйте закрывающий слэш $('.map').html('.....<\/script>';