JavaScript代码无法执行

Question

I have a very basic code to load Bing maps. By placing this code in the head section of an HTML, it will load the map inside a div #map.

This will work fine:

<script type="text/javascript">
         window.onload = GetMap;               
         function GetMap()
         {
            map = new VEMap('map');
            map.LoadMap();            
         }
         </script>

As the above code simply loads the function GetMap. So shouldn't the code inside the function work without using function as well? For example:

<script type="text/javascript">
            map = new VEMap('map');
            map.LoadMap();
        </script>

But why this would not work?

Answer 1

If you place it in the head section, it will execute before whole page is rendered and "map" div is created. This will cause errors when trying to change the div contents.

By wrapping it in function and calling that function on window load, you ensure that the code is executed only after page is fully rendered.

Alternatively you could just place your code after the div, then it should work.

Answer 2

I'm assuming that Bing maps binds to a DOM element to show the map (just like Google maps). If that's the case that DOM element must first be loaded by the browser for the binding to work. Loading it on window.load ensures that this happens. I'm sure your code should work if you move it to the bottom of the page, just above the body tag.

Answer 3

It doesn't work because the map element doesn't exist in the DOM when you call

map = new VEMap('map');

The window onload event fires at the end of the document loading process - so all objects in the document are in the DOM.

Answer 4

长话短说：如果您不喜欢函数（对您做了什么？！），请将第二个脚本放在body元素的底部