防止使用turbollinks和highcharts执行以前的JavaScript //LazyHighCharts

Prevent from executing previous JavaScript with turbolinks and highcharts //LazyHighCharts

本文关键字：JavaScript LazyHighCharts 执行 highcharts turbollinks      更新时间：2023-09-26

我使用的是turbollinks 5和rails 5版本以及最新的Highcharts。T

LazyHighCharts为Turbolinks5提供功能，并使用

包装图表构建javascript

(function() { document.addEventListener("turbolinks:load", function() { //code window.chart_my = new Highcharts.Chart(options); }); })()

但是当我从以前用turbolink加载图形的页面导航时，我在新加载的页面上得到了错误。

Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13

看起来所有以前的javascript加载"turbolinks:load"是重新评估，并导致高图抛出错误，因为在新的DOM没有元素，高图图形是渲染到。

我试图从文档中解绑定"turbolinks:load"事件，但它不起作用。它会重新求值。

考虑解决方案分叉LazyHighCharts，重写layout_helper，所以javascript是在dom元素后输出，但这会减慢页面，所以页面流将是

loaded-dom(图)评估js (sync)-->loaded-dom(图)评估js (sync)--->loaded-dom(图)评估js (sync)等等，它会减慢页面加载速度。

也许这里的人有解决这个问题的办法。

对lazy_high_charts进行pull请求

document.addEventListener("turbolinks:load", function(e) {
  // code
  e.target.removeEventListener(e.type, arguments.callee);
});
相关文章：