JavaScript-Code wird einmal am Anfang ausgeführt als

-1

Ich verwende die Jvectormap-Bibliothek, um die weltweite Map anzuzeigen. Ich habe das Tutorial von der offiziellen Website gefolgt Getting started Tutorial die Karte in der HTML-Ansicht Datei enthalten wie folgt:JavaScript-Code wird einmal am Anfang ausgeführt als

<!DOCTYPE html> <html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <link rel="shortcut icon" href="assets/ico/favicon.png"> 
    <title>Al Andulas</title> 
    <!-- Bootstrap core CSS --> 
    <link href="assets/css/bootstrap.css" rel="stylesheet"> 
    <link href="assets/css/font-awesome.min.css" rel="stylesheet"> 
    <!-- Custom styles for this template --> 
    <link href="assets/css/main.css" rel="stylesheet"> 
     <!-- Custom styles for VictorMap --> 
    <link href="assets/css/jquery-jvectormap-2.0.3" rel="stylesheet"> 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> </head> 
    <body> 
    <!-- Fixed navbar --> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">SP<i class="fa fa-circle"></i>T</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.html">Main</a></li> 
      <li><a data-toggle="modal" data-target="#myModal" href="#myModal"><i class="fa fa-envelope-o"></i></a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
<div class="container-fluid"> 
     <div class="row centered"> 
      <br><br> 
      <div class="col-lg-12">  
      <div id="world-map" style="width: 100%; height: 100%"> 
      <!-- the Script that works only once --> 
    <script> 
    $(function(){ 
     $('#world-map').vectorMap({map: 'world_mill'}); 
    }); 
    </script> 
       </div> 
      </div> 
      </div> 
     </div> <!-- Bootstrap core JavaScript 
    ================================================== --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="assets/js/bootstrap.min.js"></script> 
      <script src="assets/js/jquery-3.1.1.min.js"></script> <script src="assets/js/jquery-jvectormap-2.0.3.min.js"></script> 
<script src="assets/js/jquery-jvectormap-world-mill.js"></script> 
    </body> 
     </html>

erste Mal, dass ich fügen Sie den Code in den Editor und Blick über den Browser die Karte angezeigt wird, aber wenn ich refresh die Seite der Karte zeigt, ist nicht mehr auf der Website und deshalb habe ich den JavaScript-Code löschen und neu wieder einfügen:

<script> 
$(function(){ 
    $('#world-map').vectorMap({map: 'world_mill'}); 
}); 
</script>

, was der richtige Weg ist, die Karte dauerhaft auf der Website angezeigt werden soll.

Quelle

2016-11-05 hamza

das Skript in Ihre HTML-Seite hinzufügen –

das Skript mit dem HTML nach dem Nav Abschnitt – hamza

@hamza emendiert ist, werden Sie Fehler in der Konsole zu bekommen? – Soviut

Das Skript wird falsch platziert.

sollten Sie kein <script> innerhalb eines <div> Tag
Ihr Skript einen Fehler setzen wirft, weil Sie versuchen, jQuery zu verwenden, bevor Sie es schließen.

2.1. Bootstrap benötigt jQuery zur Ausführung. Sie müssen also jQuery vor dem Bootstrap einbinden.

Die richtige Reihenfolge

<script src="assets/js/jquery-3.1.1.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/jquery-jvectormap-2.0.3.min.js"></script> 
<script src="assets/js/jquery-jvectormap-world-mill.js"></script> 
<script> 
    $(function(){ 
     $('#world-map').vectorMap({map: 'world_mill'}); 
    }); 
</script>

Jetzt selbst alles, was bleibt wäre zu fragen wäre, warum Sie zwei Versionen von jQuery sind inklusive ... Das wird in Probleme enden - so habe ich geworfen die ältere Version hier draußen.

Quelle

2016-11-05 18:29:16 baao

Vielen Dank, ich habe das Konzept hinter der korrekten Verwendung des Skripts verstanden, das am Ende der Seite für einen schnelleren Loader platziert werden sollte. Es wird im HTML div Tag über die ihm zugewiesene ID – hamza

aufgerufen verstehe @hamza. Das Skript wird nach den anderen Skripts geladen, da es die Ausführung der anderen Skripts benötigt – baao

Erste Antwort ist richtig. Aber Sie können nächste versuchen:

$.getScript('assets/js/jquery-jvectormap-world-mill.js', function() { 
    setTimeout(function(){ 
     $('#world-map').vectorMap({map: 'world_mill'}); 
    }, 90); 
});

Quelle

2016-11-05 18:37:04

JavaScript-Code wird einmal am Anfang ausgeführt als

Antwort

Verwandte Themen