js判断网页是从哪个网页跳转来的(js判断页面是否跳出弹窗)
网页跳转指的是在浏览器中打开一个链接,跳转到另一个网页的过程。在网页开发中,经常需要根据用户行为进行一些操作,如判断用户从哪个网页跳转来,并根据不同的跳转来源进行...
网页跳转指的是在浏览器中打开一个链接,跳转到另一个网页的过程。在网页开发中,经常需要根据用户行为进行一些操作,如判断用户从哪个网页跳转来,并根据不同的跳转来源进行不同的操作。
2. 为什么需要判断网页跳转来源?
网页跳转来源判断的主要作用是在用户跳转到目标网页时,可以根据不同跳转来源作出不同的操作。比如,在不同的网页过程中,需要展示不同的广告或者重新定向到另一个网页,这时候就需要根据不同网页跳转来源进行判断和执行相应的操作。
除此之外,还有一些其他的场景需要判断网页跳转来源。比如,在网站的安全方面,需要防止CSRF攻击,即防止未经授权的第三方网站伪造用户身份进行恶意操作。这时候,判断网页跳转来源就显得尤为重要。
3. 常见的网页跳转方式
在网页开发中,常见的网页跳转方式有三种,分别是链接跳转、表单提交和JavaScript跳转。
链接跳转:当用户点击页面上的链接时,浏览器会自动跳转到链接所在的目标网页。
表单提交:在表单中输入相关信息后,点击提交按钮,浏览器会将表单提交到服务器,在服务器上进行相关处理后返回结果展示给用户。
JavaScript跳转:通过JavaScript脚本代码,可以在当前页面中重新加载另一个页面,实现网页跳转。
4. 如何判断网页跳转来源?
既然知道了什么是网页跳转,那么如何判断网页跳转来源呢?实际上,在网页开发中有多种方式可以实现。
4.1 HTTP Referrer
HTTP Referrer是HTTP协议中的一个请求头属性,用于指示HTTP请求的来源。通过HTTP Referrer属性,可以获取到用户跳转到当前页面的来源网页链接。实际上,HTTP Referrer属性并不是完全可靠的,因为它可以被用户的浏览器直接修改或者关闭,从而导致获取到的来源链接出现错误。
在JavaScript中,可以使用document.referrer属性获取HTTP Referrer属性,示例代码如下:
```
var referrer = document.referrer;
```
4.2 sessionStorage和localstorage
sessionStorage和localstorage是HTML5提供的两个存储对象,它们可以在浏览器中储存键值对,用于在同一个浏览器窗口中实现跨页面数据传递。可以在A页面中设置sessionStorage或localstorage的值,在B页面中读取存储的值,即可判断B页面跳转的来源。
在A页面中设置sessionStorage值的方法如下:
```
sessionStorage.setItem("referrer","http://www.baidu.com");
```
在B页面中获取sessionStorage值的方法如下:
```
var referrer = sessionStorage.getItem("referrer");
```
根据获取到的referrer值,即可判断B页面跳转来源。
同样的,在A页面中设置localstorage值的方法如下:
```
localStorage.setItem("referrer","http://www.baidu.com");
```
在B页面中获取localstorage值的方法如下:
```
var referrer = localStorage.getItem("referrer");
```
根据获取到的referrer值,即可判断B页面跳转来源。
需要注意的是,sessionStorage和localstorage的数据只能在同一个浏览器窗口中共享,如果在不同的浏览器窗口中打开,则无法共享数据。
4.3 URL参数
在链接跳转和表单提交中,可以将跳转来源信息通过URL参数进行传递。在判断网页跳转来源时,只需要获取URL中的referer参数值,即可判断跳转来源。
例如,在A页面中进行链接跳转时,可以在链接地址中加入referer参数:
```
跳转到百度
```
在B页面中获取referer参数:
```
var url = window.location.href;
var index = url.indexOf("?");
var params = url.substring(index+1).split("&");
for(var i=0; i
var item = params[i].split("=");
if(item[0] === "referer") {
var referrer = item[1];
}
}
```
根据获取到的referrer值,即可判断B页面跳转来源。
需要注意的是,在使用URL参数传递referer值时,需要对referer参数进行编码和解码,以防止URL中包含特殊字符导致的错误。
4.4 URL Hash
URL Hash是指URL中#后面的部分,通常用于在单页面应用中进行页面状态的保存并实现路由功能。在实际开发中,也可以通过URL Hash来实现跨页面传递referer值。
例如,在A页面中进行链接跳转时,可以在链接地址后添加Hash值:
```
跳转到百度
```
在B页面中获取Hash值:
```
var hash = window.location.hash;
var referrer = hash.substr(1);
```
根据获取到的referrer值,即可判断B页面跳转来源。
需要注意的是,在使用URL哈希传递referer值时,需要通过substr函数将#去除,以获取真实的Hash值。
5. 总结
通过上述的介绍,我们可以看出,在网页开发中,判断网页跳转来源是非常重要的。不同的判断方式对于不同的场景有着不同的适用情况。在实际的开发中,需要根据需求和场景选择最合适的跳转来源判断方式,并进行相应的代码实现。
在网页开发中,弹窗是一种常见的交互方式,通过弹窗提示用户某些信息或进行一些操作。弹窗可以分为两种类型,一种是由网页自身弹出的弹窗,另一种是由浏览器或系统弹出的弹窗。由于浏览器或系统弹出的弹窗通常伴随着安全风险,因此大多数现代浏览器都会对其进行限制或阻止。
2. 弹窗对用户体验的影响
虽然弹窗可以提供一些有用的提示信息,但是在过度使用或出现恶意弹窗的情况下,会极大地影响用户的体验。一些网站会通过弹窗进行广告推销、钓鱼攻击等不良行为,给用户带来安全问题和烦扰。
因此,用户和开发人员都需要一些方法来检测和防止不必要的弹窗出现。
3. 如何检测页面是否跳出弹窗
在 JavaScript 中,可以通过以下两种方式判断页面是否跳出弹窗:
3.1. 判断 window 对象是否仍然指向原始页面
当页面跳出弹窗时,会创建一个新的窗口,此时 window 对象的属性和方法都会发生变化。因此,可以使用以下代码检测是否跳出弹窗:
```javascript
if (window.top === window.self) {
// 在原始页面中
} else {
// 跳出了弹窗
}
```
这段代码通过比较 window.top 和 window.self 来判断当前页面是否仍然指向原始页面。如果相等,说明页面仍然在原始页面中;否则,说明页面已经跳出了弹窗。
3.2. 检测浏览器是否阻止了弹窗
现代浏览器通常会检查页面中是否有弹窗,如果检测到弹窗则会进行阻止或提示。因此,可以通过检测浏览器是否阻止了弹窗来判断页面是否跳出了弹窗。
可以通过以下代码检测浏览器是否阻止了弹窗:
```javascript
let popupBlocker = false;
let newWindow = window.open('', '_blank');
if (!newWindow || newWindow.closed || typeof newWindow.closed === 'undefined' ||
typeof newWindow.Blocker === 'function') {
popupBlocker = true;
}
```
首先,利用 window.open() 方法打开一个空白窗口,然后检测该窗口是否已被关闭或无法打开。如果无法打开,说明浏览器可能已经阻止了弹窗,那么可以将 popupBlocker 变量设置为 true。
4. 防止页面跳出弹窗
虽然可以通过以上两种方式检测和判断页面是否跳出了弹窗,但还是应该采取一些措施来防止不必要的弹窗出现。
以下是一些防止页面跳出弹窗的方法:
4.1. 使用 window.open() 方法打开弹窗
在打开弹窗时,应该尽量使用 window.open() 方法来打开弹窗,并在方法中添加一些参数配置,例如:
```javascript
window.open(url, name, 'height=500,width=500,resizable=yes,scrollbars=yes');
```
其中,参数 name 用于指定弹窗的名称,可以用来检测弹窗是否已经被打开。参数 'height=500,width=500,resizable=yes,scrollbars=yes' 是对弹窗的一些参数配置,可以根据实际情况进行调整。
4.2. 检测浏览器是否支持弹窗
有些浏览器可能会禁止弹窗,因此在打开弹窗之前,应该先检测浏览器是否支持弹窗:
```javascript
if(window.navigator.userAgent.indexOf("Firefox") !=-1)
{
// Firefox浏览器支持弹窗
}
else if(window.navigator.userAgent.indexOf("Chrome") !=-1)
{
// Chrome浏览器支持弹窗
}
else if(window.navigator.userAgent.indexOf("Opera") !=-1)
{
// Opera浏览器支持弹窗
}
else if(window.navigator.userAgent.indexOf("Safari") !=-1)
{
// Safari浏览器支持弹窗
}
else
{
// 不支持弹窗的浏览器
}
```
根据浏览器类型判断是否支持弹窗,并对用户进行提示或提供其他解决方案。
4.3. 禁用浏览器默认行为
有些弹窗可能通过浏览器的默认行为打开,例如在链接中添加 target='_blank' 属性。为了防止出现意外弹窗,可以在网站中禁用浏览器的默认行为:
```html
链接
```
通过在链接上添加 onclick 事件,并将其返回值设置为 false,可以取消浏览器的默认行为,从而防止弹窗的出现。
5. 总结
弹窗是网页交互中常见的一种方式,但过度使用或出现恶意弹窗会极大地影响用户体验和安全。为了检测和防止页面跳出弹窗,可以使用 window.top 和 window.self 对象进行比较,或者利用 window.open() 方法打开弹窗,并进行一些配置。除此之外,还可以检测浏览器是否支持弹窗,禁用浏览器的默认行为等方式来防止意外弹窗的出现。