javascript 如何在特定页面中禁用 Turbolinks?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27195019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 07:06:01  来源:igfitidea点击:

How to disable Turbolinks in a specific page?

javascriptruby-on-railsturbolinks

提问by ECsAUtaVku

I have an issue with a script only working when refreshing the page and so I'm trying to disable Turbolinks for only that page. The code below doesn't work. However, if I add the "data-no-turbolink" attribute directly to the body tag in application.html.erb it works. How do I disable Turbolinks in my view? I have followed the solution posted here, Rails 4: disable Turbolinks in a specific pagebut I can't get it to work.

我有一个脚本仅在刷新页面时工作的问题,所以我试图只为该页面禁用 Turbolinks。下面的代码不起作用。但是,如果我将“data-no-turbolink”属性直接添加到 application.html.erb 中的 body 标记,它会起作用。如何在我的视图中禁用 Turbolinks?我遵循了此处发布的解决方案Rails 4: disable Turbolinks in a specific page但我无法让它工作。

I have the gem 'jquery-turbolinks' installed.

我安装了 gem 'jquery-turbolinks'。

policy.html.erb

策略.html.erb

<% content_for :body do %>
 <% if controller.controller_name == 'pages' && controller.action_name == 'policy' %>
  <body data-no-turbolink="true">
 <% end %>
<% end %>

<div class="row">
 <div class="small-12 medium-8 large-7 columns end">
  <a href="//www.com/" class="nostyle" title="Policy">Policy</a>
  <script>(function (w,d) {var loader = function () {var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.java.com/java.js"; tag.parentNode.insertBefore(s,tag);}; if(w.addEventListener){w.addEventListener("load", loader, false);}else if(w.attachEvent){w.attachEvent("onload", loader);}else{w.onload = loader;}})(window, document); 
  </script>
 </div>
</div>

回答by Ruby Racer

You can use this oneliner in your layout:

你可以在你的布局中使用这个 oneliner:

<body <%= "data-no-turbolinks='true'".html_safe if controller_name=="pages" && action_name=="policy" %>>

But the other way to do it, which I use mostly, would be to put this chunk of code to the links leading to this page...

但是,我最常用的另一种方法是将这段代码放在通向此页面的链接中......

So, let's suppose your route is named :policy, you should do this:

所以,让我们假设你的路线命名为:policy,你应该这样做:

<%= link_to "Policy", policy_path, :"data-no-turbolink" => true %>

Long time has gone, here is an update

好久没来更新了

Recently, I have started using turbolinks 5.0 beta, by:

最近,我开始使用turbolinks 5.0 beta, 通过:

gem 'turbolinks', '~> 5.0.0.beta'

It gets far easier... All document readyjavascript gets loaded, no problem... All you have to do is add a listener to the load event.

它变得容易多了……所有的document readyjavascript都被加载了,没问题……你所要做的就是为加载事件添加一个监听器。

$(document).on('turbolinks:load', named_function );
var named_function = function() {
    // thinks to do on document load
}

You don't have to also add

您不必也添加

$(document).ready(function (){
     // stuff
});

or

或者

$(document).ready(named_function);

Because Turbolinkswill gracefully fall back to document loadif the page is hard loaded.

因为如果页面被硬加载,Turbolinks它将优雅地回退document load

回答by Stonewall Thomas

For turbolinks 5 if you use this method mentioned above:

对于 turbolinks 5,如果您使用上述方法:

    <%= link_to "Policy", policy_path, :"data-no-turbolink" => true %>

You'll need to change it to:

您需要将其更改为:

    <%= link_to "Policy", policy_path, :"data-turbolinks" => false %>

回答by stef

I tried the other methods mentioned here to no avail, but from the Turbolinks 5 docs, you can insert this meta tag on the page that you want to always load without Turbolinks.

我尝试了此处提到的其他方法无济于事,但是从 Turbolinks 5 文档中,您可以在要始终在没有 Turbolinks 的情况下加载的页面上插入此元标记。

<meta name="turbolinks-visit-control" content="reload">

Adding a data attribute to all links means that you have to know where all those links are, which is brittle if you have a situation where there might be inline links in user-created content.

将数据属性添加到所有链接意味着您必须知道所有这些链接的位置,如果您遇到用户创建的内容中可能存在内联链接的情况,这会很脆弱。

The body tag data attribute method didn't work for me as I'd expect it to - I'd have assumed that loading a turbolinks-supported page and then clicking a link to go to a page where you want to disable turbolinks would result in a full, standard page load. That didn't seem to be the case, especially with back button or history navigation.

body 标记数据属性方法对我来说并不像我期望的那样工作 - 我假设加载支持 turbolinks 的页面,然后单击链接转到要禁用 turbolinks 的页面会导致在完整的标准页面加载中。情况似乎并非如此,尤其是使用后退按钮或历史导航时。

Adding this meta tag forces Turbolinks 5 to do a full page reload before it attempts to insert any content into the dom. You get that classic flash of a blank page, but if like me, you're using external Javascript that needs to fire without interference from Turbolinks, that's the desired behaviour.

添加此元标记会强制 Turbolinks 5 在尝试将任何内容插入 dom 之前重新加载整个页面。你会得到一个空白页面的经典闪光,但如果像我一样,你正在使用需要在不受 Turbolinks 干扰的情况下触发的外部 Javascript,这就是所需的行为。

回答by Aldo Delgado

this is going sound really simple

这听起来很简单

<%- if params[:controller] == 'controller_name' and params[:action] == 'index' %>
  <body data-no-turbolink="true">
<%- else %>
  <body data-no-turbolink="false">
<%- end %>

I hope this help.

我希望这有帮助。

回答by Hartator

For the last Turbolinks, I've to add both add:

对于最后一个 Turbolinks,我必须同时添加:

<meta name="turbolinks-visit-control" content="reload">

in the <head>and:

<head>和:

 <body data-turbolinks="false">

in place of the <body>tag to fully disable Turbolinks for a specific page.

代替<body>标签以完全禁用特定页面的 Turbolinks。