javascript - 使用 Rails 5 的 DOMContentLoaded 处理程序

Question

我正在使用 Rails 5，并尝试在 assets/javascript 文件夹下的 .js 文件中实现以下内容。但由于某种原因它根本不起作用。我猜测内容需要用 DOMContentLoaded 处理程序包装，但不确定如何执行。

关于如何将该文件的 javacontent 包装在 DOMContentLoaded 处理程序中，有什么想法吗？

var x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
}

application.js

//= require rails-ujs
//=require jquery
//=require jquery_ujs
//=require jquery.turbolinks
//=require turbolinks-compatibility
//=require turbolinks
//= require underscore
//= require gmaps/google
//= require_tree .

Answer 1

document.addEventListener("DOMContentLoaded", function(event) {
  var x = document.getElementById("demo");

  function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
  }

  function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
        "<br>Longitude: " + position.coords.longitude;
  }
});

尽管使用跨浏览器兼容的解决方案，例如 jQuery.ready可能是谨慎的。

此外，如果您使用turbolinks，您应该 Hook 其“turbolinks:load”事件(如Sebastián Palma 的回答)，因为当涡轮链接替换页面内容时，DOMContentLoaded 不会被触发。