Question

我正在使用rails 5，我正在尝试在.js文件夹下的assets/javascript文件中实现以下内容。但由于某种原因，它根本不起作用。我有点猜测内容需要用一个DOMContentLoaded处理程序包装，但不知道怎么做。

关于如何在DOMContentLoaded处理程序中包装该文件的javacontent的任何想法？

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，你应该挂钩它的"turbolinks:load"事件（如当turbolinks取代页面内容时，SebastiánPalma的答案）DOMContentLoaded不会被触发。

带有rails 5的DOMContentLoaded处理程序

1 个答案: