Загрузить карту из myshiptracking после загрузки страницы - PullRequest
Новая
       1

Загрузить карту из myshiptracking после загрузки страницы

0 голосов
/ 22 февраля 2019

В дополнение к этой теме выполнение javascript после завершения загрузки страницы Я заметил, что решение не работает для загрузки карты.У меня есть похожий вариант использования.Однако, если я следую за сценарием, необходимый сценарий не загружается.

Я хочу загрузить карту после завершения загрузки страницы, однако я вижу сценарий в исходном коде страницы, но сценарий не выполняется.

Источник: 

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

На странице источника я вижу: 

var mst_width = "96%";
var mst_height = "350vh";
var mst_border = "0";
var mst_map_style = "simple";
var mst_mmsi = "244770624";
var mst_show_track = "true";
var mst_show_info = "true";
var mst_fleet = "";
var mst_lat = "";
var mst_lng = "";
var mst_zoom = "";
var mst_show_names = "0";
var mst_scroll_wheel = "true";
var mst_show_menu = "true";
window.onload = function () {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("head")[0].appendChild(element);
}

Может кто-нибудь подсказать мне, как выполнить скрипт??Я также предположил, что сценарий должен быть добавлен к «телу» вместо «голова», но я не уверен в этом.Спасибо!

Редактировать основанное изменение головы на тело: 

<script>
     var mst_width="96%";var mst_height="350vh";var mst_border="0";var mst_map_style="simple";var mst_mmsi="244770624";var mst_show_track="true";var mst_show_info="true";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
    window.onload = function() {
    var element = document.createElement("script");
    element.src = "http://www.myshiptracking.com/js/widgetApi.js";
    document.getElementsByTagName("body")[0].appendChild(element );
      }
 </script>

Ответы [ 4 ]

0 голосов
/ 22 февраля 2019

Итак, наконец, мне удалось решить проблему и получить нужную карту в своем браузере ... используя следующий код HTML + JS (который можно запустить с помощью кнопки ниже): 

<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<script>
var mst_width="100%";var mst_height="450px";var mst_border="0";var mst_map_style="terrain";var mst_mmsi="";var mst_show_track="";var mst_show_info="";var mst_fleet="";var mst_lat="";var mst_lng="";var mst_zoom="";var mst_show_names="0";var mst_scroll_wheel="true";var mst_show_menu="true";
	  
	  function loadMap() {
		var element = document.createElement("script");
		element.setAttribute("id", "myshiptrackingscript");
		element.setAttribute("async", "");
		element.setAttribute("defer", "");
		element.src = "http://www.myshiptracking.com/js/widgetApi.js";
		document.getElementById("mapContent").appendChild(element );
	  }      
       window.onload = loadMap
     console.log('Registered onload')
</script>
</head><body>
	<div id="mapContent" />
</body></html>

Два момента внимания:

  1. вы должны добавить созданный тег script как дочерний элемент тега, принадлежащего body otстраница (я использовал <div id="mapContent"/> и getElementById для доступа к ней)
  2. вы должны загружать страницу HTML через URL http://, а не через file://: с последним вы получите ошибкус сообщением типа «Браузер не поддерживает встроенные объекты»

Надеюсь, это поможет вам решить проблему в вашем реальном случае!

0 голосов
/ 22 февраля 2019

Попробуйте это: 

window.onload=function(){
  document.write('<script src="http://www.myshiptracking.com/js/widgetApi.js> 
  </script>');
}
0 голосов
/ 22 февраля 2019

оберните ваш код JavaScript следующим образом: 

if(document.readyState === 'complete') {
// good to go! Put your code here.}
0 голосов
/ 22 февраля 2019

Есть много способов вызвать вашу функцию, когда страница загружена.

Инструмент выбора js моего vanilla большую часть времени: 

    window.addEventListener('DOMContentLoaded', function(){
      //your bindings and functions
    }

Этот способ обработки предпочтительнее вашего метода загрузки, так как в противном случае вы не сможете прикрепить несколько событий.когда DOM загружается полностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...