我相信我可以第一次登录,只需检查user.sign_in_count< 2,但是我不知道如何仅在第一页上加载加载. 即我不想在用户第一次登录后触发JS,并刷新页面而不注销. 我使用Turbolinks和$(document).on(‘turbolinks：load’,function(){来触发它. 编辑1 所以我想做的是在许多页面上执行Bootstrap Tour.但是我只希望自动执行该游览,在第一页加载.旅游本身将引导用户访问我的应用程序中的其他特定页面,但是每个页面都将在每个页面上都有页面特定的浏览JS.
现在,在我的HTML中我有这样的东西：
<script type="text/javascript">
$(document).on('turbolinks:load',function() {
var tour = new Tour({
storage: false,backdrop: true,onStart: function(){
$('body').addClass('is-touring');
},onEnd: function(){
$('body').removeClass('is-touring');
},steps: [
{
element: "#navbar-logo",title: "Go Home",content: "All throughout the app,you can click our logo to get back to the main page."
},{
element: "input#top-search",title: "Search",content: "Here you can search for players by their name,school,positions & bib color (that they wore in our tournament)"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
所以我真的想做的是：
>在他们重新加载页面时,不要在第一次登录时执行新的游览来轰炸用户.
>允许他们能够通过简单的按一下链接,在以后通过手动执行旅游.
>我不想在我的数据库中存储任何东西,如果我不必 – 所以最好这应该是一个基于cookie的方法或localStorage
>假设我将使用Rails跟踪他们已经完成的登录数量.所以一旦他们登录不止一次,我就不能触发这个JS.
真正的问题是在第一次登录之前,如果他们刷新主页10次,那么这个游览会被执行10次.这就是我想阻止的.
我希望能够提供一些更加清晰的内容.
解决方法
这是我的理解,你有：
>包含单个旅游的多个页面(每页的旅游都不同)
>一种检测首次登录到帐户的方法(ruby login count)
>根据第一次登录添加脚本值的能力
解决方案概述
以下解决方案使用localStorage来存储每个旅游标识符的关键值对,以及是否已被看到. localStorage在页面刷新和会话之间依然存在,顾名思义,localStorage对于每个域,设备和浏览器都是唯一的(即chrome的localStorage不能访问firefox的本地存储,即使是在同一个域中,也不能在您的笔记本电脑上使用chrome的localStorage访问chrome的localStorage您的手机即使在同一个域).我提出这个,以说明依赖前言3切换JS标志,如果用户以前登录过.
要启动巡视,代码检查localStorage是否对应的键值对未设置为true(表示已被看到).如果确实存在并被设置为true,则巡视不会启动,否则运行.当每个巡视开始时,使用其onStart方法,我们更新/添加巡视的标识符到localStorage并将其值设置为true.
如果您只想执行当前页面的巡视,可以通过手动调用巡视开始方法进行手动执行,否则可以清除与巡视相关的所有localStorage,并将用户发回第一个page /如果你在第一页,再次调用start方法.
JSFiddle(基于HTML所提出的关于旅游的其他问题)
HTML(这可以是具有id =“tourAgain”属性的任何元素,以便以下代码生效.
<button class="btn btn-sm btn-default" id="tourAgain">Take Tour Again</button>
JS
var isFirstLogin = true; // this value is populated by ruby based upon first login
var userID = 12345; // this value is populated by ruby based upon current_user.id,change this value to reset localStorage if isFirstLogin is true
// jquery on ready function
$(function() {
var $els = {}; // storage for our jQuery elements
var tour; // variable that will become our tour
var tourLocalStorage = JSON.parse(localStorage.getItem('myTour')) || {};
function activate(){
populateEls();
setupTour();
$els.tourAgain.on('click',tourAgain);
// only check check if we should start the tour if this is the first time we've logged in
if(isFirstLogin){
// if we have a stored userID and its different from the one passed to us from ruby
if(typeof tourLocalStorage.userID !== "undefined" && tourLocalStorage.userID !== userID){
// reset the localStorage
localStorage.removeItem('myTour');
tourLocalStorage = {};
}else if(typeof tourLocalStorage.userID === "undefined"){ // if we dont have a userID set,set it and save it to localStorage
tourLocalStorage.userID = userID;
localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
}
checkShouldStartTour();
}
}
// helper function that creates a cache of our jQuery elements for faster lookup and less DOM traversal
function populateEls(){
$els.body = $('body');
$els.document = $(document);
$els.tourAgain = $('#tourAgain');
}
// creates and initialises a new tour
function setupTour(){
tour = new Tour({
name: 'homepage',// unique identifier for each tour (used as key in localStorage)
storage: false,onStart: function() {
tourHasBeenSeen(this.name);
$els.body.addClass('is-touring');
},onEnd: function() {
console.log('ending tour');
$els.body.removeClass('is-touring');
},steps: [{
element: "div.navbar-header img.navbar-brand",content: "Go home to the main page."
},{
element: "div.navbar-header input#top-search",positions & bib color (that they wore in our tournament)"
},{
element: "span.num-players",title: "Number of Players",content: "This is the number of players that are in our database for this Tournament"
},{
element: '#page-wrapper div.contact-box.profile-24',title: "Player Info",content: "Here we have a quick snapshot of the player stats"
}]
});
// Initialize the tour
tour.init();
}
// function that checks if the current tour has already been taken,and starts it if not
function checkShouldStartTour(){
var tourName = tour._options.name;
if(typeof tourLocalStorage[tourName] !== "undefined" && tourLocalStorage[tourName] === true){
// if we have detected that the tour has already been taken,short circuit
console.log('tour detected as having started previously');
return;
}else{
console.log('tour starting');
tour.start();
}
}
// updates localStorage with the current tour's name to have a true value
function tourHasBeenSeen(key){
tourLocalStorage[key] = true;
localStorage.setItem('myTour',JSON.stringify(tourLocalStorage));
}
function tourAgain(){
// if you want to tour multiple pages again,clear our localStorage
localStorage.removeItem('myTour');
// and if this is the first part of the tour,just continue below otherwise,send the user to the first page instead of using the function below
// if you just want to tour this page again just do the following line
tour.start();
}
activate();
});
PS.我们没有使用onEnd触发tourHasBeenSeen函数的原因是,当前有一个引导浏览的bug,如果最后一步的元素不存在,则游程结束而不触发onEnd回调BUG.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
