在Rails应用程序中运行JavaScript

我正在学习JavaScript并尝试将它用于Ruby on Rails。我有默认的Rails项目结构，我创建了一个简单的assets/javascript/test.js文件。在Rails应用程序中运行JavaScript

资产/ JavaScript的/ test.js：

elements = document.getElementsByTagName('BODY'); 
console.log(elements[0]);

在控制台的结果是不确定的，但是当我添加下面的代码：

var elements = document.getElementsByTagName('*'); 
for (var i = 0; i < elements.length; i++) { 
    document.writeln(elements[i].tagName); 
} 

elements = document.getElementsByTagName('BODY'); 
console.log(elements[0]);

如预期的结果 - body标签。你能解释一下怎么回事，以及如何从js访问body tag和它的元素吗？

使用：

console.log (document.body);

也显示在控制台空。

来源

2015-11-13 D. Rakov

能你不只是使用document.body？ - > https://developer.mozilla.org/en-US/docs/Web/API/Document/body – user2879041

我试过了，但在控制台中出现了同样的问题 - null。可能是因为我初始化了我的application.html.erb头文件中的js文件？当js正在处理时，body标签尚未初始化？但我还没有修改它... Rails生成它像这样 –

你需要用DOM准备的事件里面的JS：

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

在Rails的情况下，与Turbolinks：

.coffee

ready = -> 
    //your coffeescript goes here 

$(document).ready(ready) 
$(document).on('page:load', ready)

.js个

var ready = function() { 
    //your javascript goes here 
}; 

$(document).ready(ready); 
$(document).on('page:load', ready);

你资产/ JavaScript的/ test.js文件：

var ready = function() { 
    console.log(document.body); 
}; 

$(document).ready(ready); 
$(document).on('page:load', ready);

说明：

从Using jQuery Core：

一个页面不能安全操作直到文档“准备。” jQuery为你检测到这种状态。包含在 $（document）.ready（）中的代码只会在页面Document Object 模型（DOM）准备好执行JavaScript代码时运行。在$（window）.load（function（）{...}）内部包含代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备就绪后运行。

JS在您的文档中遇到它时立即执行。 Rails通常通过加载到文档头部的application.js文件导入您的JS。在这一点上，你的文档的其余部分还没有被加载，所以JS执行并发现部分未完成的DOM - 主体尚未呈现。

要推迟JS的执行，您可以将它包装 - 也就是注册它 - 与$（document）.ready事件。您可以在多个文件中多次调用$（document）.ready。通常用它来包装文件是一个好主意。

当加载整个文档，你的DOM元素已经加载，jQuery将火准备事件，并与的$（document）注册的所有代码。就绪将得到执行。

Turbolinks

从Working with JavaScript in Rails # Turbolinks：

Turbolinks附加一个单击处理程序页面上的所有<a>。如果您的浏览器支持PushState，Turbolinks将针对页面发出Ajax请求，解析响应，并用响应替换整个页面。然后它将使用PushState到将URL更改为正确的URL，保留刷新语义和给你漂亮的URL。

在编写CoffeeScript时，通常需要在加载页面时进行某种处理。使用jQuery，你会写类似这样：
$(document).ready -> 
    alert "page has loaded!" 
然而，由于Turbolinks覆盖正常的页面加载过程中，，这依赖于不会被解雇的事件。如果你有一些代码看起来是这样，你必须改变你的代码要做到这一点，而不是：
$(document).on "page:change", -> 
    alert "page has loaded!" 

资源：

来源

2015-11-14 11:24:40 Kocur4d

是啊！它的工作原理，谢谢，你能描述这个问题吗？ –

在Rails应用程序中运行JavaScript

回答

相关问题