HTML страница не умеет читать javascript - PullRequest
Новая
       50

HTML страница не умеет читать javascript

0 голосов
/ 16 марта 2020

Я учусь MVC с javascript, я смог создать несколько веб-страниц (индекс. html, о. html, 

// Here is the js mvc file
;(function(w, d){
  var _viewElement = null,
      _defaultRoute = null,
      _rendered = false;

  var jsMvc = function(){
      this._routeMap = {};
  }

  jsMvc.prototype.AddRoute = function(controller, route, template){
      this._routeMap[route] = new routeObj(controller, route, template);
  }

  jsMvc.prototype.Initialize = function(){
      var updateViewDelegate = updateView.bind(this);
      _viewElement = d.querySelector('[view]');
      if(!_viewElement) return;

      _defaultRoute = this._routeMap[Object.getOwnPropertyNames(this._routeMap)[0]];

      w.onhashchange = updateViewDelegate;
      updateViewDelegate();
  }

  function updateView(){
      var pageHash = w.location.hash.replace("#", "");
      routeName = null;
      routeObj = null;
      param = '';

      console.log('p hash: ', w.location.hash)
      if(pageHash.indexOf('?') > 0){
        param = pageHash.slice(pageHash.indexOf('?'), pageHash.length);
        pageHash = pageHash.slice(0, pageHash.indexOf('?'));
      }

      routeName = pageHash.replace("/", "");
      console.log('route name: ', routeName, '\nQuery st: ', param)

      _rendered = false;
      routeObj = this._routeMap[routeName];
      if(!routeObj){
        routeObj = _defaultRoute;
      }
      //console.log('routeObj:', routeObj, '\n_viewElement: ', _viewElement)

      loadTemplate(routeObj, _viewElement, param);
  }
  
  function loadTemplate(routeObject, viewElement, param){
    //console.log('param2: ', param)
      var xmlhttp;
      if(window.XMLHttpRequest){
        //code for IE7+, firefox, chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
      }else{
        //code for IE6, IE5
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            loadView(routeObject, viewElement, param, xmlhttp.responseText);
        }
      }
      xmlhttp.open('GET', routeObject.template, true);
      xmlhttp.send();
  }

  function loadView(routeObject, viewElement, param, viewHtml){
    //console.log('param3: ', param)

    var model = {};
    routeObject.controller(model);
    viewHtml = replaceTokens(viewHtml, model);
    if(!_rendered){
      viewElement.innerHTML = viewHtml;
      _rendered = true;
    }
  }

  function replaceTokens(viewHtml, model){
      var modelProps = Object.getOwnPropertyNames(model);

      modelProps.forEach(function(element, index, array){
        viewHtml = viewHtml.replace('{{' + element + '}}', model[element]);
      });      
      return viewHtml;
  }

  var routeObj = function(c, r, t){
      this.controller = c;
      this.route = r;
      this.template = t;
      //this.parameters = p;
  }

  w['jsMvc'] = new jsMvc();

})(window, document);
<!-- here is the index.html file that contains the navigation links -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Todo App</title>

    <script src="mvc.js"></script>
    <script type="text/javascript"></script>
  </head>

  <body>
    <h3>Navigation Links</h3>
    <div>
      <a href="#/home">Home</a>&nbsp;
      <a href="#/about?pageNum=3&id=3">About</a>&nbsp;
      <a href="#/profile?id=7">Profile</a>&nbsp;
    </div>
    <br/>
    <br/>
    <h3>View</h3>
    <div view></div>

    <script type="text/javascript">
      
      jsMvc.AddRoute(HomeController, 'home', 'index.html');


      jsMvc.AddRoute(AboutController, 'about', 'about.html');
      
      jsMvc.AddRoute(profileController, 'profile', 'profile.html');

      jsMvc.Initialize();

      function HomeController(model){
        model.message = "Hello World";
      }

      function AboutController(model){
        model.message = "Hello Timothy";
      }

      function profileController(model){
        model.message = "Hello Timothy";
        //model.parameters = getUrlQueryString(window.location.href);
      }

    </script>
    
  </body>
</html>

// this is the profile.html

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>AboutUs</title>
    <script type="text/javascript">
        alert('i')

    </script>

  </head>

  <body>

    <div class="root"><h1>ID = <span id ="urlId">  </span> </h1> </div>

    <script>
      console.log('display any string')
    </script>

    
    <div>
      Welcome. Your id is  <span id ="">{{parameters}}</span> page
    </div>
  </body>
</html>

профиля. html и mvc. html). Страница индекса имеет ссылки для навигации по другим страницам. Но проблема, с которой я столкнулся сейчас, заключается в том, что на других страницах (например, в профиле. html) код javascript не работает, и в консоли не отображается ошибка. Я не знаю, может ли кто-нибудь здесь помочь мне. Я хочу иметь возможность получить параметры URL, которые ссылка на страницах индекса передает на другие страницы

...