0

If I simply add the !DOCTYPE html tag to make this an HTML5 doc it breaks the script. Remove the !DOCTYPE html tag and it works. Why?

FYI, I am using DOJO for the first time and using this example to get familiar. 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Web Mercator Map Type</title>
        <script type="text/javascript">
            //copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
            function getURLParam(name) {
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              return (results === null ? "" : decodeURIComponent(results[1]));
            }
            var gmaps_v = getURLParam('v');
            if (gmaps_v) gmaps_v = '&v='+gmaps_v;
            var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
            document.write(script);
        </script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/src/arcgislink.js">
        </script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/arcgislink/examples/mercator.js">
        </script>
    </head>
    <body style="margin:0px; padding:0px;">
        <div id="map_canvas" style="width:100%; height:100%">
        </div>
    </body>
</html>
simple
  • 2,327
  • 7
  • 35
  • 55
  • 1
    I think it's because the changes in html5 about parsing document.write. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_Parser Your are qriting script inside script, at the end of the copied part – miguel-svq Jun 04 '14 at 23:15
  • 3
    "breaks the script"? Could you tell us what "breaks" actually means? Is there an error? – spender Jun 04 '14 at 23:16
  • copy paste the code yourself and test in a browser, if you remove the !DOCTYPE html tag, it works. – simple Jun 04 '14 at 23:22
  • Note that attempting to disguise a closing tag using `'">' + 'script>'` is pointless as it's the `` pattern that matters. An effective way to hide it is to quote the `/` character: `'"><\/script>'`. – RobG Jun 05 '14 at 00:11
  • Removing the doctype trips browsers into quirks mode, which changes things (especially in IE). – RobG Jun 05 '14 at 00:16
  • @simple : There's the thing... people don't want to "copy and paste the code" in order to answer your question. By missing out details in your question and telling us to find out for ourselves, you are drastically reducing the number of people who will want to help... It becomes too much like real work. – spender Jun 07 '14 at 19:44
  • @simple ...so perhaps next time you could publish on jsbin or similar so we don't have to cut and paste the code. – spender Jun 07 '14 at 20:23

1 Answers1

4

Your document has no height, so your canvas fills 100% of nothing. I don't know how omitting doctype affects the rendering, so I've no idea why it works without a doctype, but generally, the body starts at height 0.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            html,body{
                height:100%; /* w00t */
            }
        </style>
        <title>Web Mercator Map Type</title>
        <!-- yay -->
spender
  • 117,338
  • 33
  • 229
  • 351