Существует несколько способов обойти эту проблему:
1- Проверка того, что переменная не равна нулю, перед изменением ее src attr:
Самый базовый подход, но вероятнее всего самыйизбыточный (если вы не используете вспомогательную функцию, такую как ответ @ user1538301):
var iframe = document.getElementById("greYoutube");
if(iframe) {
iframe.src = "https://www.youtube.com/embed/h7_w43jJ0Ts"
}
2- Использование jQuery:
Использование jQuery для изменения элемента по ID (или любому селектору) не вызоветошибка, даже если совпадений нет.
//will always work, even if there is no match
$("#greYoutube").attr("src", "https://www.youtube.com/embed/h7_w43jJ0Ts");
3- Использование селектора, отличного от ID:
Преимущество этого третьего подхода состоит в том, что он является лаконичным и keepbale , так как вам не нужно копировать / вставлять его столько раз, сколько у вас есть iframes .
Вы можете установить конкретное имя класса для вашегоiframes для отсрочки, а также атрибут data-src (или назовите его как хотите), который содержит источник, который должен быть новым источником для целевого iframe. Позвольте мне объяснить:
HTML:
<iframe class='defer' src='someSrc' data-src='https://www.youtube.com/embed/h7_w43jJ0Ts'/>
JS:
//this will not throw an error, because if there is no such element,
//'iframesToDefer' will be empty and thus we won't enter the loop.
var iframesToDefer = document.getElementsByClassName('defer');
for(var iframe of iframesToDefer) {
iframe.src = iframe.dataset['src'];
}
В примечании стороны не следует объявлять переменную болеечем один раз (я имею в виду вашу переменную iframe).