js判断网页是从哪个网页跳转来的（js判断页面是否跳出弹窗）
作者：抖音小助手 浏览量：
时间：2024-05-09 16:37
网页跳转指的是在浏览器中打开一个链接，跳转到另一个网页的过程。在网页开发中，经常需要根据用户行为进行一些操作，如判断用户从哪个网页跳转来，并根据不同的跳转来源进行不同的操作。
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() 方法打开弹窗，并进行一些配置。除此之外，还可以检测浏览器是否支持弹窗，禁用浏览器的默认行为等方式来防止意外弹窗的出现。
