Скрипт загружается до jquery - PullRequest
Новая
       28

Скрипт загружается до jquery

0 голосов
/ 27 декабря 2018

Я пытаюсь использовать grapesjs в своем приложении.Итак, я добавил jquery в заголовок html-страницы и скрипт в теле.Мой jquery загружается на этой странице, но перед загрузкой jquery выполняется скрипт в теле.Так что скрипт не работает

JavaScript - Как мне убедиться, что jQuery загружен? используя приведенную выше ссылку, я попытался дать запрос в теге заголовка и скрипт втело, но оно не работает. 

<meta charset="utf-8">
<title>GrapesJS</title>
  <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
  <script src="https://unpkg.com/grapesjs"></script>
  <style>
    body,
    html {
      height: 100%;
      margin: 0;
   }
  </style>
  <div id="gjs" style="height:0px; overflow:hidden;">
    <div class="panel">
      <h1 class="welcome">Welcome to</h1>
        <div class="big-title">
          <svg class="logo" viewBox="0 0 100 100">
            <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
         </svg>
         <span>GrapesJS</span>
       </div>
       <div class="description">
        This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
        copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
    </div>
  </div>
 </div>

<script type="text/javascript">
  $(window).on('load', function(){
      var editor = grapesjs.init({
          showOffsets: 1,
          noticeOnUnload: 0,
          container: '#gjs',
          height: '100%',
          fromElement: true,
          storageManager: { autoload: 0 },
      });
  });

editor.BlockManager.add('testBlock', {
    label: 'Block',
    attributes: { class:'gjs-fonts gjs-f-b1' },
    content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})

Сценарий в теле должен быть загружен после загрузки или распаковки запроса.

Ответы [ 2 ]

0 голосов
/ 27 декабря 2018

Выньте все js из головы и добавьте их после тела.Во-вторых, возьмите весь скрипт со страницы html, создайте новый js-файл и добавьте туда свой код.

Таким образом, ваш HTML-файл будет выглядеть так 

<body>
 //rest of html
<script src="pathToJquery"></script>
 <script src="https://unpkg.com/grapesjs"></script>
<script src="pathToCustomJS"></script>
</body>
0 голосов
/ 27 декабря 2018

Вы должны поместить свой код скрипта в document.ready функционировать так: 

$(document).ready(function(){
  // your js code
});

или window.load так: 

$(window).on('load', function(){
  // your js code
});

Надеюсь, это поможет вам :)

...