Вложенный строковый литерал вызывает ошибку в HTML-валидаторе - PullRequest
Новая
       47

Вложенный строковый литерал вызывает ошибку в HTML-валидаторе

0 голосов
/ 20 октября 2019

- JavaScript, который вызывает ошибки при отправке в https://validator.w3.org:

$('#results-list').append(
      '<li class="video-info">

        <h3>${responseJson.items[i].snippet.title}</h3>
        <iframe class="video" src="https://www.youtube.com/embed/${responseJson.items[i].id.videoId}" allow="autoplay; encrypted-meda gyroscope; picture-in-picture" allowfullscreen></iframe>
        <ul class="link-boxes">
            <li><a href="https://youtubemp3.today/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Audio</a></li>
            <li><a href="https://onlinevideoconverter.party/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Video</a></li>
        </ul>

      </li>`
);

- Ошибки:

1) Ошибка: неверное значение https://www.youtube.com/embed/${responseJson.items[i].id.videoId} для атрибута src для элемента iframe: недопустимый символ в сегменте пути: {не допускается.

из строки 48, столбец 9;в строку 48, столбец 181

<iframe class="video" src="https://www.youtube.com/embed/${responseJson.items[i].id.videoId}" allow="autoplay; encrypted-meda gyroscope; picture-in-picture" allowfullscreen></iframe>

-

2) Ошибка: неверное значение https://youtubemp3.today/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId} для атрибута href элемента a: недопустимый символ в запросе: {не допускается.

из строки 50, столбец 17;в строку 50, столбец 152

<li><a href="https://youtubemp3.today/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Audio</a></li>

-

3) Ошибка: неверное значение https://onlinevideoconverter.party/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId} для атрибута href элемента a: недопустимый символ в запросе: {не допускается.

из строки 51, столбец 17;в строку 51, столбец 162

<li><a href="https://onlinevideoconverter.party/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Video</a></li>

Код работает. Я не понимаю, как устранить эту ошибку и, более того, я не могу понять, в чем причина? Очевидно, что ошибка объяснена, но я знаю, что есть обходной путь, потому что включение строковых литералов в атрибут src для элемента iframe, кажется, делается довольно часто.

Любая помощь или понимание того, как решить эту проблемупроблема и то, что является основной проблемой, будет принята с благодарностью!

РЕДАКТИРОВАТЬ

Я не включаю вторую пару обратных тиков в атрибуте src, потому что каждый раз, когда я делаюthis: 

$('#results-list').append(
      `<li class="video-info">

        <h3>${responseJson.items[i].snippet.title}</h3>
        <iframe class="video" src=`https://www.youtube.com/embed/${responseJson.items[i].id.videoId}` frameborder="0" allow="autoplay; encrypted-meda gyroscope; picture-in-picture" allowfullscreen></iframe>
        <ul class="link-boxes">
            <li><a href="https://youtubemp3.today/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Audio</a></li>
            <li><a href="https://onlinevideoconverter.party/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D${responseJson.items[i].id.videoId}" target="_blank">Download Video</a></li>
        </ul>

      </li>`
    )};

Это как-то делает код, следующий за ним, неработоспособным, и я получаю эту ошибку в консоли после загрузки страницы:

Uncaught SyntaxError: отсутствует) после аргументаlist index.js: 75

Также, это строка 75:

<iframe class="video" src=`https://www.youtube.com/embed/${responseJson.items[i].id.videoId}` frameborder="0" allow="autoplay; encrypted-meda gyroscope; picture-in-picture" allowfullscreen></iframe>

...