Question

我使用的是使用javascript的Bootstrap。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script src="router.js"></script>
  <div id="my-app"></div>
</body>

</html>

router.js

window.addEventListener('load', () => {
  if (window.location.pathname === '/register') {
    const myApp = document.getElementsByTagName('head')[0]
    const layoutScript = document.createElement('script')
    const jQuery = document.createElement('script')
    const bootStrapJs = document.createElement('script')
    const jQueryCookie = document.createElement('script')

    const bootStrapMinCss = document.createElement('link')
    const bootStrapThemeCss = document.createElement('link')

    jQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'

    bootStrapMinCss.type = 'text/css'
    bootStrapMinCss.rel = 'stylesheet'
    bootStrapMinCss.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'

    bootStrapThemeCss.type = 'text/css'
    bootStrapThemeCss.rel = 'stylesheet'
    bootStrapThemeCss.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'

    bootStrapJs.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'

    jQueryCookie.type = 'text/javascript'
    jQueryCookie.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'

    layoutScript.type = 'text/javascript'
    layoutScript.src = 'javascripts/views/layout.js'

    myApp.appendChild(jQuery)
    myApp.appendChild(jQueryCookie)
    myApp.appendChild(bootStrapJs)
    myApp.appendChild(bootStrapMinCss)
    myApp.appendChild(bootStrapThemeCss)
    myApp.appendChild(layoutScript)
  }
})

页面加载正常，样式与我期望的一样。但是，我不断收到两个错误：

Uncaught ReferenceError: jQuery is not defined

和

Uncaught Error: Bootstrap's JavaScript requires jQuery`

将这些脚本文件直接加载到index.html时，没有任何错误。但是，我想使用JS做到这一点。

Bootstrap需要jQuery，所以我先加载jQuery，然后再加载所有其他资产，为什么浏览器认为jQuery没有定义？

以下屏幕截图：

更新：

通过将jQuery导入移动到我的index.html，两个错误都消失了。因此，index.html看起来像这样：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
  </script>
</head>
<body>
  <script src="router.js"></script>
  <div id="my-app"></div>
</body>

</html>

这更好，但仍然无法解释为什么我不能使用普通JS在路由器中做同样的事情。

Answer 1

将常量名称 jQuery 更改为其他名称，因为 jQuery 是保留关键字。

const load_jquery = document.createElement('script')
load_jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
myApp.appendChild(load_jquery)

Answer 2

问题是，由于您正在动态加载脚本，因此它们不会以同步方式加载，即，引导脚本可能会在加载jquery之前加载。

您可以尝试在jquery脚本的加载回调中加载rest或脚本

  jQuery.addEventListener('load', () => {
    myApp.appendChild(jQueryCookie)
    myApp.appendChild(bootStrapJs)
    myApp.appendChild(bootStrapMinCss)
    myApp.appendChild(bootStrapThemeCss)
    myApp.appendChild(layoutScript)
  });
  myApp.appendChild(jQuery)

使用appendChild使用Bootstrap

2 个答案: