Turbolinks 5:从特定页面中的其他站点添加外部javascript文件

Question

我正在使用turbolinks 5 beta 1,对于某些特定页面,我想加载外部javascript文件.

在我的示例中,我有一个联系人页面,我想通过加载谷歌地图api来显示地图.访问根页面时不应加载它,但稍后在单击指向联系人页面的链接后将其包含在内.

产生一个javascript脚本标签工作在Turbolinks 2.但似乎不再工作了.

有可能检查javascript是否已经加载,否则在需要时异步加载它.

像这样的东西:

loadScript = (src, callback) ->
  script = document.createElement("script")
  script.type = "text/javascript"
  script.onload = callback if callback
  document.getElementsByTagName("head")[0].appendChild(script)
  script.src = src

initialize = ->
  # init map here

load = ->
  if $('#gmap').size > 0
    if typeof(google) == 'function'
      initialize()
    else
      loadScript 'https://maps.googleapis.com/maps/api/js?&callback=initialize'

$(document).on 'turbolinks:load', -> load()

这是解决这个问题的唯一方法还是有更简单的方法？

Answer 1

现在你可以尝试刺激。

它是为页面特定的 JavaScript 设计而生的。

• 添加一个新的脚本标签，例如<%= javascript_pack_tag 'merchant' %>
• 在商家文件中，您可以依靠刺激来处理 Turbolinks 和 jquery 的事件。

您甚至可以使用 webpack 和 es6。

// hello_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "name", "output" ]

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}