Скользящее меню не заполняется в мобильном браузере (пустой экран) - PullRequest
Новая
       33

Скользящее меню не заполняется в мобильном браузере (пустой экран)

0 голосов
/ 19 января 2019

Я могу без проблем просматривать страницу в своем веб-браузере, но в моем мобильном браузере ничего не отображается (белый пустой экран) (пробовал и мобильное сафари, и мобильный хром) для этой страницы (скользящее меню с картой листовки в качестве главной страницы). )

Я пробовал несколько CDN, чтобы просмотреть хотя бы простой элемент ONSEN UI в моем браузере. Комбинация тех, которые играют для моего веб-браузера, перечислены ниже. CDN доставили мне довольно много головной боли! Любая помощь будет высоко оценен. Моя цель - превратить это в прогрессивное веб-приложение. Я включил манифест и добавлю сервисного работника. 

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script src="components/loader.js"></script>
  <script src="components/monaca-jquery/jquery.js"
          type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description"
        content="">
  <meta name="author"
        content="">

  <link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
        integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
        crossorigin="anonymous">
  <link rel="stylesheet"
        href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
  <link rel="stylesheet"
        href="/css/main.css">
  <link rel="stylesheet"
        href="/css/simple-sidebar.css">

  <link rel="stylesheet"
        href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet"
        href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="js/jquery.js"
          type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
          integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
          crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
          integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
          crossorigin="anonymous"></script>

  <link rel="manifest"
        href="/manifest.json">

  <script>
    ons.bootstrap();

    ons.ready(function () {
      if (localStorage.length >= 1) {
        removeOldJourneys();
        //******************Start Intervals******************//
        startIntervalForFindMatchingJourneys();
        startIntervalsForEachLocalJourney();
        startIntervalsForEachAcceptedJourney();
        startIntervalsForRating();

        startIntervalForMessages();
        startIntervalForGetSentMessages();
      }
    });
  </script>
  <title>CarPooling App</title>
</head>

<body>
  <ons-sliding-menu var="app.slidingMenu"
                    menu-page="menu.ejs"
                    main-page="map.ejs"
                    side="left"
                    type="overlay"
                    max-slide-distance="250px">
  </ons-sliding-menu>

  <p id="LocalEmail"
     style="display:none">
    <%= user.local.email %>
  </p>

  <!-- EMAIL SESSION (EJS) -->

  <script type="text/javascript">
    $(document).ready(function () {
      var x = $("#LocalEmail").html().trim();
      // alert(x);  // now JS variable 'x' has the uid that's passed from the node backend.
      console.log(x);
      window.localStorage.setItem("Email Session", x);
    });
  </script>

  <script>
    document.addEventListener("pageinit", function (e) {

      if (e.target.id == "personal_inf") {
        loadPersonalInf();
        // startIntervalForFindMatchingJourneys();
      }

      if (e.target.id == "edit_personal") {
        loadPersonalInfVal();
      }

      if (e.target.id == "FBprofile") {
        testAPI();
        testAPI2();
      }

      if (e.target.id == "my_journeys_passenger") {
        loadJourneysPassenger();
      }

      if (e.target.id == "my_journeys_driver") {
        loadJourneysDriver();
      }

      if (e.target.id == "my_journeys_matching") {
        //$(".tab-bar").show();
        loadJourneysMatching();
      }

      if (e.target.id == "journey") {
        loadJourneyVal();
      }

      if (e.target.id == "journey_matching") {
        loadMatchingJourneyVal();
      }

      if (e.target.id == "journey_accepted") {
        loadAcceptedJourneyVal();
      }

      if (e.target.id == "new_vehicle") {
        loadNewVehicleInf();
      }

      if (e.target.id == "edit_vehicle") {
        // loadVehicleInfVal();
      }

      if (e.target.id == "vehicle_inf") {
        loadVehicleInf();
      }

      if (e.target.id == "my_vehicles") {
        loadVehiclesList();
      }

      if (e.target.id == "ratings_driver") {
        loadJourneysDriver();
      }

      if (e.target.id == "main_map") {
        loadMap();
        onCloseApp();
        modal.show();
      }

      if (e.target.id == "others_personal_inf") {
        loadOthersPersonalInf();
      }

      if (e.target.id == "pending_personal_inf") {
        loadPendingPersonalInf();
      }

      if (e.target.id == "others_vehicle_inf") {
        loadOtherVehicleInf();
      }

      if (e.target.id == "my_messages") {
        loadMessagesList();
      }

      if (e.target.id == "message") {
        loadMessageVal();
        setTimeout(function () {
          document.getElementById('scrollDown').click();
        }, 1000);
      }
    }, false);
  </script>

  <!-- Leaflet -->
  <link rel="stylesheet"
        href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
          integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
          crossorigin=""></script>

  <!-- Leaflet Routing Machine -->
  <link rel="stylesheet"
        href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  <link rel="stylesheet"
        href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

  <!-- Font Awesome -->
  <link rel="stylesheet"
        href="font-awesome/css/font-awesome.min.css">

  <!-- Awesome Markers -->
  <link rel="stylesheet"
        href="awesome_markers/leaflet.awesome-markers.css">
  <script src="awesome_markers/leaflet.awesome-markers.js"></script>

</body>

</html>
...