Что является жизнеспособной альтернативой нестрогому тегу в XHTML?

Я кодирую сайт электронной коммерции, используя XHTML в visual studio. В настоящее время для создания страницы контактов я использую API Google, чтобы иметь возможность отображать местоположение магазина на интерактивной карте. Мой вопрос:

  • В случае, если у пользователя отключен JS в браузере, как бы я показал статическое изображение местоположения, не используя скрытый тег, а он не совместим с XHTML?

До сих пор у меня есть это в нескольких других элементах в теге body, только показывая это, чтобы облегчить понимание вопроса:

    <noscript><img src="map.png" class="map_location" /></noscript>
    <div id=map></div>

который взаимодействует с файлом Javascript

    function initMap() {
      var wannabemarker = { lat: 53.273301, lng: -2.817487 };
      var map = new google.maps.Map(document.getElementById('map'), {
    center: wannabemarker,
    zoom: 12
    });
var marker = new google.maps.Marker({
    position: wannabemarker,
    map: map
 });
}

Карта отлично работает как при включенном JS, так и на статическом изображении показано, выключен ли JS, но возникла ли ошибка проверки, и я должен заставить ее исчезнуть. Любая помощь будет любезно оценена.

Спасибо

Источник

1 ответ

Решение

Первое, на что стоит обратить внимание, это то, что вы явно не используете XHTML, так как атрибут без кавычек в <div id=map> сломал бы вашу страницу в браузерах, если бы вы были. Так что на самом деле вы используете обычный HTML, но, вероятно, думаете, что используете XHTML, потому что у вас есть XHTML-тип документа.

Поэтому лучший совет - просто прекратить это делать. использование <!DOCTYPE html> вместо этого, и вы можете перестать беспокоиться о <noscript> быть недействительным в XHTML.

Теперь в XHTML при правильном использовании недопустимый <noscript> элемент не имеет никакого эффекта, но по умолчанию имеет стиль display: none если JS включен и display:inline если JS отключен. Обратите внимание, что в любом случае содержащийся img будет выбран с сервера, тогда как если вы используете обычный HTML, img не будет выбран, если JS включен.

Итак, в XHTML вы можете сделать что-то вроде

<script>
   (function(){
       var css = '.noscript { display:none }',
           head = document.head || document.getElementsByTagName('head')[0],
           style = document.createElement('style');

       style.type = 'text/css';
       if (style.styleSheet){
         style.styleSheet.cssText = css;
       } else {
         style.appendChild(document.createTextNode(css));
       }

       head.appendChild(style);
   })();
</script>
<span class="noscript"><img src="map.png" class="map_location" alt="map" /></span>

и получить тот же эффект <noscript> в XHTML, будучи действительным XHTML5.

(Спасибо Кристофу в статье Как создать тег