主体加载后未调用函数

Question

你好，我有一个 Javascript 函数 initMap();我希望通过 body onload="initMap();" 加载此函数加载页面后，我可以进入 IE 的调试器并编写 initMap();在控制台中，它仍然说这个函数是未定义的。我知道页面生命周期存在一些问题，但我不确定问题到底是什么。任何帮助将不胜感激。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {
      lat: 33.923928,
      lng: -118.245153
    }
  });
  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}
var fancy = document.createElement('script');
fancy.src = 'scripts/jquery-1.12.1.min.js';
fancy.type = 'text/javascript';
fancy.language = "javascript";
document.head.appendChild(fancy);
fancy.onload = function() {
  $.noConflict();
  initMap()
  SetSlideIntervals()
  jQuery.ajax({
    dataType: "json",
    url: "http://dev.virtualearth.net/REST/v1/Traffic/Incidents/33.799323,-118.402795,34.045909,-118.086747?key=Aq1xeHo7y0F9fT24Yk4DlC5tEFmf_RiGLc4wj734BXZpevMgGM4uZNvk4sc3PEpD",
    data: "",
    success: function(WeatherObj) {
    }
  });
}

Answer 1

window.onload = function(){
function initMap() {
              var map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 11,
                  center: { lat: 33.923928, lng: -118.245153 }
              });

              var trafficLayer = new google.maps.TrafficLayer();
              trafficLayer.setMap(map);
          }
          var fancy = document.createElement('script');
          fancy.src = 'scripts/jquery-1.12.1.min.js';
          fancy.type = 'text/javascript';
          fancy.language = "javascript";
          document.head.appendChild(fancy);
          fancy.onload = function () {
              $.noConflict();
              initMap()
              SetSlideIntervals()


              jQuery.ajax({
                  dataType: "json",
                  url: "http://dev.virtualearth.net/REST/v1/Traffic/Incidents/33.799323,-118.402795,34.045909,-118.086747?key=Aq1xeHo7y0F9fT24Yk4DlC5tEFmf_RiGLc4wj734BXZpevMgGM4uZNvk4sc3PEpD",
                  data: "",
                  success: function (WeatherObj) {

                  }

              });

          }

    initMap();    
 }

将所有内容放入 window.onload()

加载完所有内容后，您必须调用您的函数。

Answer 2

使用此代码段：

window.onload = function () {
   //all your code goes here.
}

或使用html5推迟这个：

<script src="code.js" defer></script>

Answer 3

既然您正在使用 jQuery，为什么不直接使用 DOM-ready jQuery 处理程序？

        <!DOCTYPE html>
    <html>
        <head>
            <title>Test stuff</title>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        </head>
        <body>
            <script type="text/javascript">
                $( document ).ready(function() {
                        console.log( "ready!" );
                        function initMap() {
                            // your code here
                        }

                        initMap();
                });
            </script>
        </body>
    </html>

您可以查看该函数的完整 jQuery 文档： https://learn.jquery.com/using-jquery-core/document-ready/

主体加载后未调用函数

function not being called after body onload

javascript

lifecycle

onload