Angular项目通过CDN集成turn.js的翻页异常与URL哈希问题

问题根源 #

turn.js自带的hash.js会修改URL的hash值记录页码，而Angular默认采用HashLocationStrategy（通过#/管理路由），两者的hash操作产生冲突：

1. 点击翻页时，hash.js将URL改为#/page-1（或类似格式）
2. Angular路由检测到hash变化，但找不到匹配的路由规则，自动重定向回初始路由#/
3. hash.js的定时器（每100ms检查一次hash）又会尝试重新修改hash，形成循环，导致页面闪回、URL快速变化。

解决方案 #

方案1：禁用turn.js的hash功能（推荐） #

初始化turn.js时，添加hash: false配置，阻止它修改URL hash：

// 你的turn.js初始化代码
$('#book').turn({
  width: 800, // 你的翻书容器宽度
  height: 600, // 你的翻书容器高度
  hash: false // 禁用hash页码记录
});

这样turn.js不会再修改URL，彻底避免和Angular路由的冲突。

方案2：切换Angular路由为HTML5模式 #

如果需要保留turn.js的hash页码功能，可以将Angular路由切换为PathLocationStrategy（无hash模式）：

1. 在app.module.ts中修改路由配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由规则
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: false, // 禁用hash模式，启用HTML5模式
    enableTracing: false // 可选，用于调试路由
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 注意：HTML5模式需要服务器配置支持（如Nginx/Apache重写规则），本地开发时Angular CLI会自动处理，但生产环境需要额外配置，避免刷新页面404。

方案3：修改hash.js适配Angular路由（进阶） #

如果必须保留Angular hash模式和turn.js的hash功能，需要修改hash.js的逻辑，让它的hash值兼容Angular的路由格式：

1. 修改fragment方法，提取Angular hash（#/）之后的部分：

fragment: function() {
    var hash = getHashParts();
    // 提取#/之后的内容，适配Angular路由
    var angularHashPart = hash[1] ? hash[1].replace(/^\/+/, '') : '';
    return (pushState) ?
        window.location.pathname + ((hash[1]) ? '#' + hash[1] : '')
        : angularHashPart || '';
},

2. 修改get方法，生成符合Angular格式的hash：

get: function(path, params) {
    var p, fragment = '', parameters = [];

    for(p in params) {
        if (!Object.prototype.hasOwnProperty(p))
            continue;
        parameters.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]));
    }

    if (parameters.length>0)
        parameters = '?' + parameters.join('&');

    return (pushState) ? path + parameters :
        getHashParts()[0] + '#/' + path + parameters; // 改为#/path格式
},

这样hash.js生成的URL会是#/page-1，和Angular路由格式一致，需要在Angular中添加对应路由规则（如path: 'page-:num'）来匹配，避免重定向。

额外说明 #

如果控制台有具体报错信息，可以进一步排查，但核心冲突点是Angular路由和turn.js hash操作的竞争关系，优先用方案1解决，最简单直接。

内容的提问来源于stack exchange，提问作者sistemas13