首先，JavaScript超出了我的舒适范围。在我的网站上，我想显示一张地图，但是加载时间非常长，并且包含很多请求。因此，为了进行较长的页面加载，为什么不让用户单击按钮并加载JavaScript。一个限制是，地图应显示在特定的行和列中。
到目前为止，我所拥有的区域和按钮：
<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>
这将在不离开网站的情况下在同一窗口中打开地图。
对于专家来说，解决起来可能很简单。...有人愿意帮助我吗？
答案 0 :(得分：1)
this function loads external script，只需将其添加到您的条件中
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState == "loaded" ||
script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function () {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
这是使用示例
loadScript("[SCRIPT_URL]", function () {
//do something after script loads
});
答案 1 :(得分：1)
如果您要更改脚本，建议您将脚本组织到html之外的文件中，并使用原型进行调查。我加载了几乎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);
脚本将被添加并执行。如果这是您自己的脚本文件，则替代方法是将代码包装在一个函数中，然后仅在按钮单击处理程序期间调用该函数。
答案 2 :(得分：0)
将脚本放在单独的.js文件中。从脚本中删除了函数myFunc。接下来，更改了脚本标记之间的代码：
<input type="button" class="button-class" onclick="myFunc(this)">
<script type="text/javascript">
function myFunc(e) {
var script = document.createElement('script');
script.src = 'http://localhost/assets/src/cmsms_uisge-beatha/js/marineTraffic.js';
script.type = 'text/javascript';
$('head')[0].appendChild(script);
}
</script>
Marinetraffic.js
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() {
if ("https:" == document.location.protocol) {
/* secure */
var src = 'https://www.marinetraffic.com/';
} else {
/* unsecure */
var src = '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'
);
}
})()
//
// EOF
//
这在FireFox开发人员日志中给我一个警告：
从异步加载的外部对document.write（）的调用 脚本被忽略了。
有什么想法吗？