Question

我正在使用Visual Studio中的XHTML编写电子商务网站。目前，我建立了一个联系页面，我使用Google API来显示商店在交互式地图中的位置。我的问题是：

如果用户在浏览器中禁用了JS，如何在不使用nonscript标签的情况下显示该位置的静态图像啊它是否符合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 on完美结合，静态图像显示JS关闭但是出现验证错误，我必须让它消失。任何帮助都将不胜感激。

谢谢

Answer 1

首先要注意的是，你显然并没有真正使用XHTML，因为<div id=map>中的未加引号的属性会破坏您在浏览器中的页面。所以你真的使用普通的HTML，但可能认为你使用的是XHTML，因为你有一个XHTML文档类型。

所以最好的建议就是停止这样做。请改用<!DOCTYPE html>，您可以不再担心<noscript>在XHTML中无效。

现在，在XHTML中正确使用时，无效的<noscript>元素无效，但如果启用了JS则默认设置为display: none，如果禁用JS则默认设置为display:inline。请注意，在任何一种情况下，都将从服务器获取包含的img，而如果使用普通的HTML，则在启用JS时将不会获取img。

因此，在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>

并在XHTML5中获得与<noscript>相同的效果，同时使XHTML5有效。

_{（感谢Christoph在How to create a <style> tag with Javascript获取JS模式）。}

什么是XHTML中非nonscript标记的可行替代方案

1 个答案: