javascript - 单击按钮时加载外部 JavaScript

Question

首先，Javascript 远远超出了我的舒适区。在我的网站上，我想显示 map ，但是加载时间非常长并且包含大量请求。因此，为了实现较长的页面加载，为什么不让用户单击按钮并加载 JavaScript。一个限制是， map 应该显示在特定的行和列中。

到目前为止，我所拥有的区域和按钮:

<div class="row">
   <div class="col-4">
       <input type="button" class="button-class" onclick="myFunc(this)">
           <script type="text/javascript">
             var width='100%';   // the width of the embedded map in pixels or percentage 
              var height='300';   // the height of the embedded map in pixels or percentage 
              var border='1'; // the width of the border around the map (zero means no border) 
              var shownames='true';   // to display ship names on the map (true or false) 
              var latitude='51.7143'; // the latitude of the center of the map, in decimal degrees 
              var longitude='04.0889';    // the longitude of the center of the map, in decimal degrees 
              var zoom='11';  // the zoom level of the map (values between 2 and 17) 
              var maptype='0';    // use 0 for Normal Map, 1 for Satellite, 2 for OpenStreetMap 
              var trackvessel='' //244770624';     MMSI of a vessel (note: vessel will be displayed only if within range of the system) - overrides "zoom" option 
              var fleet='';   // the registered email address of a user-defined fleet (user's default fleet is used) 
              // Read more at http://www.marinetraffic.com/en/p/embed-map#6YXCVvOUaBxYHgoT.99
              function myFunc(e) {
                  if ("https:" == document.location.protocol) {
                      /* secure */
                      var src = (typeof localembed != 'undefined') ? 'https://marinetraffic.local/' : 'https://www.marinetraffic.com/';
                  } else {
                      /* unsecure */
                      var src = (typeof localembed != 'undefined') ? 'http://marinetraffic.local/' : 'http://www.marinetraffic.com/';
                  }

                if ((window.latitude === undefined) && (window.longitude === undefined) && ( (window.fleet !== undefined && window.fleet != "") || (window.fleet_id !== undefined && window.fleet_id != ""))) {
                  window.latitude = 0;
                  window.longitude = 0;
                }

                if (typeof window.mtembedcode != "undefined") {
                  var overridenLatLon = '';
                  if(window.latitude !== undefined && window.latitude != ''  && window.longitude !== undefined && window.longitude != ''){
                    if(window.zoom === undefined){
                      window.zoom = 3;
                    }
                    overridenLatLon = '/zoom:' + ((window.zoom === undefined) ? '' : zoom) + '/centery:' + ((window.latitude === undefined) ? '' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '' : longitude);
                  }
                  document.write(
                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/customembed' + overridenLatLon + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + ((window.trackimo !== undefined) ? '/trackimo:' + window.trackimo : '') + '/mtembedcode:'  + window.mtembedcode + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>\n'
                  );
                } else {
                  document.write(
                    '<iframe name="marinetraffic" id="marinetraffic"' + ' width="' + ((window.width === undefined) ? '550' : width) + '"' + ' height="' + ((window.height === undefined) ? '300' : height) + '"' + ' scrolling="no" frameborder="' + ((window.border === undefined) ? '0' : border) + '"' + ' src="' + src + ((window.language === undefined) ? 'en' : language) + '/ais/embed' + '/zoom:' + ((window.zoom === undefined) ? '3' : zoom) + '/centery:' + ((window.latitude === undefined) ? '36' : latitude) + '/centerx:' + ((window.longitude === undefined) ? '23' : longitude) + '/maptype:' + ((window.maptype === undefined) ? '4' : maptype) + '/shownames:' + ((window.shownames === undefined) ? 'false' : shownames) + '/mmsi:' + ((window.trackvessel === undefined) ? '0' : trackvessel) + '/shipid:' + ((window.trackshipid === undefined) ? '0' : trackshipid) + '/fleet:' + ((window.fleet === undefined) ? '' : fleet) + '/fleet_id:' + ((window.fleet_id === undefined) ? '' : fleet_id) + '/vtypes:' + ((window.vtypes === undefined) ? '' : vtypes) + '/showmenu:' + ((window.showmenu === undefined) ? '' : showmenu) + '/remember:' + ((window.remember === undefined) ? 'false' : remember) + '">Browser does not support embedded objects.<br/>Visit directly <a href="http://www.marinetraffic.com/">www.marinetraffic.com</a>' + '</iframe>\n'
                  );
                }
              }
              // src="{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js";
            //window.onload = init();
          </script>
   </div>
</div>

这将在同一窗口中打开 map ，而不会按原样保留网站。

对于专家来说可能很容易解决......有人愿意帮助我吗？

Answer 1

如果您要更改脚本，我建议您将脚本组织到 html 之外的文件中，并使用原型(prototype)进行研究。我加载了近 100 个不同的 html、js 和 css 片段，因此有一些实用程序可以为我完成大部分跑腿工作。也就是说，如果您只想添加一个简单的脚本，您可以这样做:

在按钮单击事件处理程序中执行以下操作。

使用 jQuery:(推荐，除非项目非常简单)

var script = document.createElement('script');
script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';
script.type = 'text/javascript';
$('head')[0].appendChild(script);

没有 jQuery:

var script = document.createElement('script');
script.src = '{root_url}/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

脚本将被添加并执行。如果这是您自己的脚本文件，另一种方法是将代码包装在函数中，并且仅在按钮单击处理程序期间调用该函数。