禁用一页应用程序的浏览器后退按钮
Disable browser back button for one page application
我需要在单页应用程序中禁用浏览器的后退按钮。
我尝试使用 onhashchange 或 window.history.forward 之类的方法,但它们不起作用(原因可能是 url 不起作用此处未更改)
我认为禁用后退按钮不会真正起作用。相同的原因有很多,但请查看 this。您最好的解决方案是使用
警告用户
window.onbeforeunload = function() { return "You will leave this page"; };
从技术上讲,您无法禁用某人浏览器上的“后退”按钮,但是,您可以使该按钮不可用或继续加载同一页面。
你可以在这里查看Disabling the Back Button
您可以在点击后退按钮时重定向同一页面,您的页面会刷新,但您每次都会在同一页面上
我从事 AngularJS 构建单页应用程序的工作,我想禁用或阻止浏览器的后退按钮,因为我的应用程序具有用于所有导航到我的应用程序的按钮和锚点。
我搜索并测试了很多代码,这是很容易防止浏览器后退按钮的代码,下面的代码对我有用。
window.onpopstate = function (e) {
window.history.forward(1); }
当历史检测到第一个 history.back()
window.onpopstate
被执行,然后在这一刻之后检测到历史上的任何后退或前进的 onpopstate 事件。
我认为如果用户持续点击 "onpopstate" 将无法正常工作
只需使用
window.onbeforeunload = function() { window.history.forward(1); };
或者如果您想警告用户
window.onbeforeunload = function() { return "Back button is not available!"; window.history.forward(1); };
如果您使用的是 AngularJS,下面的代码应该可以解决问题。您必须将此代码添加到 app.js 文件或您注入所有依赖项的文件
var myApp = angular.module('myApp', ['ngMask', 'ngRoute', 'ngAnimate', 'ngSanitize', 'ngTouch', 'ngCookies', 'ngMessages', 'ui.router', 'ui.grid', 'ui.directives', 'ui.filters', 'ui.bootstrap', 'angularUtils.directives.dirPagination']);
myApp.run(function($rootScope, $route, $location) {
var allowNav = false;
var checkNav = false;
$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) {
allowNav = checkNav;
checkNav = true;
});
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// Prevent the browser default action (Going back)
if (checkNav) {
if (!allowNav) {
event.preventDefault();
} else {
allowNav = false;
}
}
});
});
我有一个不同的场景,我们想要将一些页面列入黑名单。允许大部分 SPA 使用后退按钮,而少数页面则不允许。我创建了一个服务来覆盖 popstate 的功能。但是我 运行 遇到了一个奇怪的问题。
import { RouteAddress } from 'app/common/constants/routes.constants';
import { Injectable } from '@angular/core';
import { StringUtilsService } from 'app/common/services/utilities/string-utils.service';
@Injectable()
export class LocationStrategyService {
private static shouldSkip = false;
// Array of route urls that we can't go back to.
private static blackListed = [
RouteAddress.ScreeningStepTwoCreditAvailability,
RouteAddress.ScreeningStepTwo];
constructor() {
window.onpopstate = this.overridingPopState;
}
overridingPopState(event: any) {
// This was having issue scoping
const isBlackListed = (navigatingTo: string): boolean => {
navigatingTo = navigatingTo.split('?')[0];
const pathFound = LocationStrategyService.blackListed.find((route) => navigatingTo.endsWith('/' + route));
return pathFound !== undefined && pathFound.length > 0;
}
// have black listed route and determing if able to go back
if (!LocationStrategyService.shouldSkip && isBlackListed(event.currentTarget.location.pathname)) {
window.history.forward();
// Protecting against a going forward that will redirect
LocationStrategyService.shouldSkip = isBlackListed(window.location.pathname);
} else {
LocationStrategyService.shouldSkip = false;
}
}
}
然后在您的 AppComponent 构造函数中添加 LocationStrategyService,它会在启动时调用它。
import { LocationStrategyService } from 'app/common/services/utilities/location-strategy.service';
export class AppComponent {
constructor(
private locationStrategyService: LocationStrategyService) {}
}
import { LocationStrategy } from '@angular/common';
constructor( private location: LocationStrategy){
// preventing back button in browser implemented by "Samba Siva"
history.pushState(null, null, window.location.href);
this.location.onPopState(() => {
history.pushState(null, null, window.location.href);
});
}
我需要在单页应用程序中禁用浏览器的后退按钮。 我尝试使用 onhashchange 或 window.history.forward 之类的方法,但它们不起作用(原因可能是 url 不起作用此处未更改)
我认为禁用后退按钮不会真正起作用。相同的原因有很多,但请查看 this。您最好的解决方案是使用
警告用户window.onbeforeunload = function() { return "You will leave this page"; };
从技术上讲,您无法禁用某人浏览器上的“后退”按钮,但是,您可以使该按钮不可用或继续加载同一页面。
你可以在这里查看Disabling the Back Button
您可以在点击后退按钮时重定向同一页面,您的页面会刷新,但您每次都会在同一页面上
我从事 AngularJS 构建单页应用程序的工作,我想禁用或阻止浏览器的后退按钮,因为我的应用程序具有用于所有导航到我的应用程序的按钮和锚点。
我搜索并测试了很多代码,这是很容易防止浏览器后退按钮的代码,下面的代码对我有用。
window.onpopstate = function (e) { window.history.forward(1); }
当历史检测到第一个 history.back()
window.onpopstate
被执行,然后在这一刻之后检测到历史上的任何后退或前进的 onpopstate 事件。
我认为如果用户持续点击 "onpopstate" 将无法正常工作
只需使用
window.onbeforeunload = function() { window.history.forward(1); };
或者如果您想警告用户
window.onbeforeunload = function() { return "Back button is not available!"; window.history.forward(1); };
如果您使用的是 AngularJS,下面的代码应该可以解决问题。您必须将此代码添加到 app.js 文件或您注入所有依赖项的文件
var myApp = angular.module('myApp', ['ngMask', 'ngRoute', 'ngAnimate', 'ngSanitize', 'ngTouch', 'ngCookies', 'ngMessages', 'ui.router', 'ui.grid', 'ui.directives', 'ui.filters', 'ui.bootstrap', 'angularUtils.directives.dirPagination']);
myApp.run(function($rootScope, $route, $location) {
var allowNav = false;
var checkNav = false;
$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) {
allowNav = checkNav;
checkNav = true;
});
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// Prevent the browser default action (Going back)
if (checkNav) {
if (!allowNav) {
event.preventDefault();
} else {
allowNav = false;
}
}
});
});
我有一个不同的场景,我们想要将一些页面列入黑名单。允许大部分 SPA 使用后退按钮,而少数页面则不允许。我创建了一个服务来覆盖 popstate 的功能。但是我 运行 遇到了一个奇怪的问题。
import { RouteAddress } from 'app/common/constants/routes.constants';
import { Injectable } from '@angular/core';
import { StringUtilsService } from 'app/common/services/utilities/string-utils.service';
@Injectable()
export class LocationStrategyService {
private static shouldSkip = false;
// Array of route urls that we can't go back to.
private static blackListed = [
RouteAddress.ScreeningStepTwoCreditAvailability,
RouteAddress.ScreeningStepTwo];
constructor() {
window.onpopstate = this.overridingPopState;
}
overridingPopState(event: any) {
// This was having issue scoping
const isBlackListed = (navigatingTo: string): boolean => {
navigatingTo = navigatingTo.split('?')[0];
const pathFound = LocationStrategyService.blackListed.find((route) => navigatingTo.endsWith('/' + route));
return pathFound !== undefined && pathFound.length > 0;
}
// have black listed route and determing if able to go back
if (!LocationStrategyService.shouldSkip && isBlackListed(event.currentTarget.location.pathname)) {
window.history.forward();
// Protecting against a going forward that will redirect
LocationStrategyService.shouldSkip = isBlackListed(window.location.pathname);
} else {
LocationStrategyService.shouldSkip = false;
}
}
}
然后在您的 AppComponent 构造函数中添加 LocationStrategyService,它会在启动时调用它。
import { LocationStrategyService } from 'app/common/services/utilities/location-strategy.service';
export class AppComponent {
constructor(
private locationStrategyService: LocationStrategyService) {}
}
import { LocationStrategy } from '@angular/common';
constructor( private location: LocationStrategy){
// preventing back button in browser implemented by "Samba Siva"
history.pushState(null, null, window.location.href);
this.location.onPopState(() => {
history.pushState(null, null, window.location.href);
});
}