Namespace в JavaScript

145
25 ноября 2018, 18:10

При разборе мануала по использованию API от Яндекса столкнулся со следующей проблемой. Непонятно откуда берется(или как/где подключается) объект ya в этой строчке:

var AudioPlayer = ya.music.Audio;

Что собственно и приводит к ошибке:

Следовал строго инструкции.

js файлы подключаю в такой последовательности:

<head>
<meta charset="utf-8">  
    <script src="https://music.yandex.ru/api/audio/dist/index.js"></script>
    <script src="/index.js" type="text/javascript" ></script>       
</head>

Console: 

Refused to load the script 'https://music.yandex.ru/api/audio/dist/index.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

но такая ошибка выходит, если убрать `type=javascript', если его оставить, то ошибки нет, но скрипт по-прежнему не подгружается

Answer 1

Перво-наперво, загрузи сайт в браузере Хром или яндекс, нажми f12, справа зайди в опцию console. Там и глянь, красным будет помечено, что у тебя не загружено. Отсюда и пляши. Скорее всего яндекс не подгружается. Кстати лучше будет если ты этот файл скачаешь и будешь загружать локально.

Answer 2

Если сделать строго по инструкции то всё работает! 

var dom = { 
    play: document.querySelector(".controls_play"), 
    overlay: document.querySelector(".overlay") 
}; 
var audioPlayer = new ya.music.Audio(null, dom.overlay); 
console.log(audioPlayer);
.controls_play { 
    padding: 5px 10px; 
    background: #fff; 
    border: 1px #aaa solid; 
    cursor: pointer; 
} 
.controls_play:hover { 
    border-color: #666; 
} 
.overlay { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
} 
.overlay_hidden { 
    display: none; 
} 
.overlay_error { 
    background: #ffcccc; 
    color: #ff0000; 
}
<head> 
  <meta charset="utf-8"> 
  <script src="https://music.yandex.ru/api/audio/dist/index.js"></script> 
</head> 
<div class="player"> 
    <div class="controls"> 
        <button class="controls_play">Play</button> 
    </div> 
    <div class="overlay"></div> 
</div>

Answer 3

Изучив вывод консоли:

Refused to load the script 'https://music.yandex.ru/api/audio/dist/index.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

пришел к выводу что проблема в manifest.json файле. Необходимо было прописать значение в свойстве content_security_policy:

{
    "manifest_version": 2,   
    /*---*/
    "content_scripts": [
        {
            "matches": ["https://music.yandex.ru/*"],
            "js": ["index.js"]
        }
    ],
    "content_security_policy": "script-src 'self' https://music.yandex.ru; object-src 'self'",
    /*---*/
}

источник

READ ALSO
Не вызывать отправку формы по нажатию на кнопку внутри нее
javascript

Не вызывать отправку формы по нажатию на кнопку внутри нее

Я создаю реакт компонент, содержащий в себе элементы, одним из которых является форма содержащая кнопкиТак как кнопки внутри формы, по-умолчанию,...

 152
Выводить текущую дату по умолчанию на JS?
javascript

Выводить текущую дату по умолчанию на JS?

Нашел в сети готовый код на JS расчета предполагаемой даты родовС кодом все ОК, он прост и понятен

 346
node js + exceljs помогите разобраться с потоками
javascript

node js + exceljs помогите разобраться с потоками

у меня есть функция

 207
Получить из спрайтов *.gif
javascript

Получить из спрайтов *.gif

Я новичок в PHP и JSХотел выполнить тривиальную задачу, скачать себе на ПК анимированные стикеры из ВК, думаю, CTRL+SHIFT+U+найти путь до нужной gif и дело...

 158