脚本在 jquery 之前加载

Question

I am trying to use grapesjs in my application.我正在尝试在我的应用程序中使用葡萄。 So, I added the jquery in the head of the html page and the script in the body.所以，我在html页面的头部添加了jquery，在正文中添加了脚本。 My jquery is loaded in that page but before jquery is loaded the script in the body is executed.我的 jquery 已加载到该页面中，但在加载 jquery 之前，主体中的脚本已执行。 So that the script is not working所以脚本不起作用

JavaScript - How do I make sure a jQuery is loaded? JavaScript - 如何确保加载了 jQuery？ using the above link i tried to give the query in the header tag and the script in the body, but it is not working.使用上面的链接，我尝试在标题标签和正文中的脚本中提供查询，但它不起作用。

<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>`
})

The script in the body must be loaded after is query is downloaded or unpacked.正文中的脚本必须在查询下载或解包后加载。

Answer 1

You have to place your script code inside document.ready function like this:您必须将脚本代码放在 document.ready 函数中，如下所示：

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

or window.load like this:或 window.load 像这样：

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

Hope this will help you :)希望能帮到你：）

Answer 2

Take out all the js from the head and add them after the body.把head里面的js全部取出来，加到body后面。 Secondly take out all the script from html page and create a new js file and add you code there.其次从html页面中取出所有脚本并创建一个新的js文件并在那里添加代码。

So your html file will look like this所以你的 html 文件看起来像这样

<body>
 //rest of html
<script src="pathToJquery"></script>
 <script src="https://unpkg.com/grapesjs"></script>
<script src="pathToCustomJS"></script>
</body>

脚本在 jquery 之前加载

问题描述

2 个解决方案

解决方案1
0 2018-12-27 06:06:18

解决方案2
0 2018-12-27 08:31:24

脚本在 jquery 之前加载

问题描述

2 个解决方案

解决方案1 0 2018-12-27 06:06:18

解决方案2 0 2018-12-27 08:31:24

解决方案1
0 2018-12-27 06:06:18

解决方案2
0 2018-12-27 08:31:24