15900627980

简单的Javascript / AJAX退出弹出页脚本,创建div叠加退出

发布于:10-12     
所以有一天一个客户要求访问者离开网站的任何页面时,他们就被一个提醒(如“警报(这是你的警报);”),如果他们点击'取消'然后去另一个充当“退出流行”页面 最后的努力 页面打捞出售,或者一个选择,或尊严,你。 否则他们就点击“OK”,在他们的快乐方式相反的方向。



通常我只会从另一个页面抓取代码做了类似的事情,但是如果你曾经处理旧代码之前,你已忘记你需要改变为了工作“开箱即用”的新形势下,所以你浪费大约10分钟测试。 所以我决定一劳永逸地简化这个过程!

我周围Googleverse中搜寻一个类似的简单脚本,但找不到一个易于使用的基本上是包含在一个易于使用的文件,不包括厨房水槽里没用的功能。 我将试着解释我的代码。 所以我们开始吧: 首先,你想要的页面动作发生,在我们的案例中,index . php 这是唯一重要的,页面上所需的代码。
 
<script type="text/javascript" src="scripts/as_exitPop.js">
/***********************************************

------------------------------------------
* Easy Javascript/PHP Exit Pop up script  Developer's Blog 
* This notice MUST stay intact for legal use
* Visit @andysowards  for full updated source code
***********************************************/
</script>
这当然包括. js文件的代码(将我们所有的工作),我当然会保留版权信息(creative commons,基本上你可以做任何你想做的,但是请给我信用。)。 我通常把这个代码之前结束标签,但是我还没有试过头部代码。 给我反馈如果你尝试它! 接下来是实际的. js文件中,被称为“as_exitPop。 js和位于脚本的文件夹:
//EDIT HERE ONLY

var ExitPopURL = '/dev/exitpop/exit.php'; //This is the URL where your 'exit page' is located.

/* NOTE: If you experience an error it is most likely due to the strict AJAX security, make sure that you are accessing the correct URL, for example, if you have  in your browser, and in the 'ExitPopURL' then there will be a conflict. they must both match. .htaccess to ensure that your visitors are visiting  is good practice here.*/

var AlertBox = "*****************************************************\n\nWait! Stop! Don't Go!\n\nBefore leaving, please leave a comment on the \n\nscript post and share your suggestions.\n\nThanks for visiting AndySowards.com.\n\nAndy \n\n*****************************************************";

// This is what the alert() pop up verbage says.

//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ------------------------------

当然这有更多的. js文件,但是目前,这都是你真的需要担心。 第一次你看到一个var叫做“ExitPopURL”和希望自我explanitory它是什么。 所有你要做的就是. js文件中编辑这个url指向你退出流行的页面。 这意味着这个页面会看到如果用户选择给你一个“第二次机会”。 第二,你看到一个名为“栏”的变量,再一次,希望自我explanitory,但这是变量,其中包含的文本将出现在javascript弹出警告框。 你可以改变任何verbage你想。 现在在接下来的代码:
window.onload = function(){
// this is where we start our journey...
createExitPop();
}// end function onunload

 这里正在发生的事情是,createExitPop (); 函数(下)宣布正在运行时,浏览器首先加载页面。 所以当页面加载时,你的退出流行隐藏,像一只老虎,在等人,试图离开。 下一个是你的基本的AJAX函数,我不会解释这个,因为有无数的AJAX的其他地方引用和解释:
function ajaxGET(divId, page, effect)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == 'collapse') { document.getElementById(divId).style.display='none'; }
else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open("GET",page,true);
xmlHttp.send(null);
}

 接下来,让宣布createExitPop功能:
function createExitPop()
{
var theBody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('id','ExitDiv');
theBody.setAttribute('id','body');
newdiv.setAttribute('style', 'width: 100%; height: 100%;');

// put div on page
theBody.appendChild(newdiv);

//add exit pop to page (contents are from your exit.php(or whatever you named it) page)
document.getElementById('ExitDiv').value = ajaxGET('ExitDiv', ExitPopURL);

// style exit pop to resemble its own page
document.getElementById('ExitDiv').style.display = "none";
document.getElementById('ExitDiv').style.top = '0px';
document.getElementById('ExitDiv').style.left = '0px';
document.getElementById('ExitDiv').style.position = 'relative';
document.getElementById('ExitDiv').style.backgroundColor = '#FFFFFF';

}// end createExitPop


 我们正在body标签,将它分配给“人体”变量,然后设置一个属性来引用它,在这种情况下,我们设置的id“身体”。 然后我们创建一个全新的div,调用变量持有它“newdiv”。 然后我们做同样的事情与我们做的新div标记,并添加一个属性,一个id“ExitDiv”。 我们也为我们的新div设置一些风格,在这种情况下,我们设置宽度和高度。
然后我们添加新的div孩子文档的主体。 一旦我们的新“ExitDiv”是在文档中,我们可以使用DOM引用它。 我们使用AJAX注入的退出。 php的内容到div使用变量ExitPopURL”为内容的参考。
然后,我们只是ExitDiv添加一些样式和定制。
我们几乎已经完成,这是魔法发生的地方!
isExit = true;

function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;

var bodyTag = document.getElementById? document.getElementsByTagName("BODY")[0] : document.body;

// add id="body" so that it can be referenced.
bodyTag.setAttribute("id", "body");

//replace body text with exit pop
bodyTag.innerHTML = document.getElementById('ExitDiv').innerHTML;
return AlertBox;
} // end if
}// end function

window.onbeforeunload = function(){

// Lay down an exit pop!!
return ExitPop(isExit);

}// end function onunload

在这里我们设置变量isExit为true。 为什么? 因为如果他们试着做任何事情除了访问一个“isExit = false”标记链接或表单,然后他们试图离开这个页面! 我们不能有,现在我们可以吗? 当然不是。

ExitPop内部函数的参数是“isExit”变量,它正在评估是否真或假。 如果这是真的,那么函数替换任何与内部HTML body标签ExitDiv,进而使你的页面的内容的退出。 php页面。 然后警报弹出要求用户他们想要做什么,和你选择的复制使用“栏”变量。

然后,神奇的窗口。 onbeforeunload方法,窗前加载另一个页面,它调用ExitPop函数和引用的当前状态“isExit”变量。

一旦弹出对话框,如果他们选择“OK”。 如果他们选择“取消”。 简单的对吧?

最后,剩下的唯一的事就是让你的退出。 php的页面看不过你想! 和页面将取代任何在你的退出。 php的文件,当然你可以命名的退出。 php文件的任何你想要的。

最后一个注意,如果你有导航链接页面上不需要触发退出流行功能,只需将这个属性添加到链接' onClick = " isExit = false;“如果你使用的是一种形式,那么它将是' onSubmit =“isExit = false;“你应该偷偷过去安全和所需的页面:)。

 

 

TAGS:Javascript   AJAX   div   叠加   退出   弹出页   脚本

 

 

上一篇:响应Web设计和移动用户

下一篇:这四个应用程序设置为手机游戏设计基准

相关内容 观察行业视觉,用专业的角度,讲出用户的心声。
Back

I NEED TO BUILD WEBSITE

我需要建站

*请认真填写需求信息,我们会在24小时内与您取得联系。

十见(上海)网络科技有限公司 Copyright© 2014-2019 沪ICP备19028882号