JS cookie,用于在第x次网页浏览后显示内容 [英] JS cookie for displaying content after x-th pageview
问题描述
我试图找到如何设置JavaScript cookie,以便在访问者说第4次网页浏览后显示fancybox弹出窗口.
这是我用来显示Fancybox弹出窗口的代码,但是您可能会看到,它仅在第一次浏览时显示该代码,并且一天后就会过期
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value + ";domain=.mysite.net;path=/";
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
jQuery(document).ready(function() {
var show = getCookie("fancyreg");
if(show==null || show=="") {
$.fancybox(
{
'type' : 'iframe',
'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
'autoDimensions' : false,
'width' : 480,
'height' : 260,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
setCookie('fancyreg','1',1);
}
});
如果您能帮助我如何在现有代码中添加延迟,以便在3秒钟(3000毫秒)后显示弹出窗口,我也希望如此.
我尝试使用setTimeout(function()如下
<script type="text/javascript">
jQuery(document).ready(function() {
setTimeout(function() {
$.fancybox({
'type' : 'iframe',
'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
'autoDimensions' : false,
'width' : 480,
'height' : 260,
'transitionIn' : 'none',
'transitionOut' : 'none'
})
}, 4000);
});
</script>
但它不起作用.
关于控制浏览量,我不知道如何设置,也找不到任何资源来帮助我.
非常感谢
2019年4月2日更新
如@Gregdebrick的评论中所述,正在更新答案以使用JavaScript Cookie插件 https://github.com/js-cookie/js-cookie 而不是已弃用的jQuery Cookie插件.
因此,从页面中的CDN加载JS Cookie插件后:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
使用以下脚本:
$(document).ready(function () {
// if the cookie is undefined, create it
if(typeof Cookies.get('visited') === "undefined"){
Cookies.set("visited", 0);
}
// Cookies.get('visited') returns a string
if (parseInt(Cookies.get('visited')) >= 3) {
// open fancybox after 3 secs on 4th visit
setTimeout(function () {
$.fancybox.open({
// your fancybox API options here
});
}, 3000);
} else {
let increase = parseInt(Cookies.get('visited')) + 1;
Cookies.set('visited', increase, { expires: 1 });
return false;
}
}); // ready
请参见 已更新了有效的演示版 >
假设您正在使用 jQuery Cookie插件,则可以使用以下代码3秒后启动fancybox,同一天访问第4页:
$(document).ready(function () {
// create cookie
var visited = $.cookie('visited'); // visited = 0
if (visited >= 3) {
// open fancybox after 3 secs on 4th visit or further on the same day
setTimeout(function () {
$.fancybox.open({
// your fancybox API options here
});
}, 3000);
} else {
visited++; // increase counter of visits
// set new cookie value to match visits
$.cookie('visited', visited, {
expires: 1 // expires after one day
});
return false;
}
}); // ready
请参见 工作演示
I am trying to find how may I set a javascript cookie so it displays a fancybox popup after say 4-th pageview of visitor.
Here is the code that I am using to display a Fancybox popup, but as you may see, this displays the code only on first pageview and it expires after a day
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value + ";domain=.mysite.net;path=/";
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
jQuery(document).ready(function() {
var show = getCookie("fancyreg");
if(show==null || show=="") {
$.fancybox(
{
'type' : 'iframe',
'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
'autoDimensions' : false,
'width' : 480,
'height' : 260,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
setCookie('fancyreg','1',1);
}
});
I would also like if you may help me how to add a delay in my existing code so teh popup display after 3 seconds (3000 ms).
I tried with setTimeout(function() as below
<script type="text/javascript">
jQuery(document).ready(function() {
setTimeout(function() {
$.fancybox({
'type' : 'iframe',
'href' : 'http://www.mysite.net/popup/', //URL to popup page or image
'autoDimensions' : false,
'width' : 480,
'height' : 260,
'transitionIn' : 'none',
'transitionOut' : 'none'
})
}, 4000);
});
</script>
but it does not work.
As for controlling the pageviews, I have no idea how to set nor I could find any resource to help me through this.
Thanks a lot
Update April 02, 2019
As mentioned in the comments by @Gregdebrick the answer is being update to use the JavaScript Cookie plugin https://github.com/js-cookie/js-cookie instead of the deprecated jQuery Cookie plugin.
So, after loading the JS Cookie plugin from CDN in your page:
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
Use the following script:
$(document).ready(function () {
// if the cookie is undefined, create it
if(typeof Cookies.get('visited') === "undefined"){
Cookies.set("visited", 0);
}
// Cookies.get('visited') returns a string
if (parseInt(Cookies.get('visited')) >= 3) {
// open fancybox after 3 secs on 4th visit
setTimeout(function () {
$.fancybox.open({
// your fancybox API options here
});
}, 3000);
} else {
let increase = parseInt(Cookies.get('visited')) + 1;
Cookies.set('visited', increase, { expires: 1 });
return false;
}
}); // ready
Assuming that you are using the jQuery Cookie Plugin, then you could use the following code to launch fancybox after 3 seconds, the 4th page visit on the same day :
$(document).ready(function () {
// create cookie
var visited = $.cookie('visited'); // visited = 0
if (visited >= 3) {
// open fancybox after 3 secs on 4th visit or further on the same day
setTimeout(function () {
$.fancybox.open({
// your fancybox API options here
});
}, 3000);
} else {
visited++; // increase counter of visits
// set new cookie value to match visits
$.cookie('visited', visited, {
expires: 1 // expires after one day
});
return false;
}
}); // ready
See working DEMO
这篇关于JS cookie,用于在第x次网页浏览后显示内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!