不为特定路径加载 JS 文件答案

【问题标题】：Not load a JS file for a specific path不为特定路径加载 JS 文件
【发布时间】：2017-09-16 02:48:14
【问题描述】：

我有一个mean-stack 的网站。

通常，我所有的外部参考都列在index.html

我意识到我正在使用的一个外部 JS 库（例如，https://cdnjs.cloudflare.com/troublelibrary.js）与我网站的一部分存在冲突。所以我正在寻找的解决方法是不要为特定路径加载它https://www.myexample.com/specific。

有谁知道如何在路由中实现这一点？

编辑1：（查看完整问题here）

其实有conflit的库是history.js。我一直加载它的初始代码如下。结果https://localhost:3000/home在浏览器中总是https://localhost:3000/home（即不会添加#，因为history.js）

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>

然后，如果我按照 Ben 的建议尝试以下代码：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
    var newScript = document.createElement('script');
    newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
    document.head.appendChild(newScript);
    console.log(window.location.href)
</script>

我意识到第一次加载https://localhost:3000/home 不会改变。但是，如果我刷新浏览器，它可以变为https://localhost:3000/#/home。

所以附加脚本和直接引用不完全一样，有谁知道为什么？

【问题讨论】：

所以如果你在某个页面上，脚本不会被加载？我假设您使用的是单页 Angular 应用程序？
抱歉，如果我打开某个页面，我不想加载脚本；对于其他页面，脚本可以在一开始就加载。我正在使用单页角度应用程序。
用户可以直接导航到故障页面而不先进入主页（或任何其他页面）吗？还是他们必须先转到某个页面（如主页）才能进入故障页面？
别担心。将是我使用该特定页面，我不会从那里导航到其他页面；通常用户不太可能去那个特定的页面。
好的。如果用户首先导航到该页面，则无法加载脚本（简单的解决方案）。但是，如果他们先转到不同的页面，然后导航到故障页面，您将需要删除由冲突库创建的对象，因为它已经从前一页加载。然后，您将需要在其他页面上重新加载它。使用 window.location 的条件，它根据您的 URL 加载/删除脚本应该可以工作。

标签： javascript angularjs angular-ui-router lazy-loading html5-history

【解决方案1】：

我从不同的角度看待您的问题。您提到您使用history.js 来避免URL 上的#。但是您不需要history.js 来执行此操作。我认为您以错误的方式理解了您的问题。有一个内置的 Angular 功能可以摆脱 # 路径。因为# 用于跟踪任何路由上的相对路径。如果我们愿意，我们可以覆盖该默认功能。

但是如果你使用这种方法，服务器应该负责将用户重定向到任何应用程序route 上的index 或home 页面，因为 Angular 会处理应用程序中的所有路由。

首先你应该添加

<base href="/" />

在您的 HTML 文件中。

然后你应该在 Angular 应用程序中启用HTML5 Mode，如下所示。

$locationProvider.html5Mode(true);

通过添加这两个属性，您可以摆脱# 路径，这是推荐的方式。

以下是一个完整的例子。

var app = angular.module("app", ["ngRoute"]);


app.controller("MainController", function($scope){
});


//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    
    $routeProvider
        .when('/', {
            template: '<h1>Home</h1>',
            reloadOnSearch: true
        })
        .when('/about', {
            template: '<h1>About</h1>',
            reloadOnSearch: true           
        }).otherwise({
        redirectTo: '/'
    });

    // This will remove hash bang from the routes   
    $locationProvider.html5Mode(true);
    
}]);

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
  
  <base href="/" />
  
</head>

<body>

  <div>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </div>
  
  <div ng-app="app" ng-controller="MainController">
     <ng-view></ng-view>
  </div>
  
</body>

</html>

正如您在上面的示例中看到的，当您单击about 链接时，服务器会在/about 上以not found 响应。这意味着# bang 被删除了。

【讨论】：

谢谢...但我知道 html5 模式，问题是我的应用程序中需要office.js（在大多数页面中，但在specific 中不需要），它以某种方式禁用 html5，请参阅 here，所以我知道的唯一解决方法是在 office.js 之后添加 history.js。

【解决方案2】：

这是一种方法：

if(window.location.href !== 'https://url.com/path/to/trouble/page'){
    var newScript = document.createElement('script');
    newScript.src = 'https://url.com/path/to/script';
    document.head.appendChild(newScript);
}

将此添加到文档的<head>。它不会在您在if 语句中指定的页面上加载故障脚本。确保不要在页面上的其他任何地方加载故障脚本。

【讨论】：

有时会有一些bug，不完全作为直接参考。请参阅我的 OP 中的编辑。
用if(window.location.href !== 'https://localhost:3000/home' && window.location.href !== 'https://localhost:3000/#/home' )怎么样？
你没看懂我的意思...home不是具体页面，在加载home时，应该加上history.js。我的初始代码（直接引用）运行良好，而如果我以您的方式添加history.js，它并不总是运行良好。所以我的结论是，你appending 的方式与直接引用并不完全相同。我不知道为什么。

【解决方案3】：

您可以在 Angular 中延迟加载脚本

 <script type="text/javascript" ng-src="{{exUrl1}}"></script>

在你的代码中的某个地方（基于你想要的任何逻辑）

 $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

【讨论】：

谢谢，确实是一种延迟加载的方式...如果我的大部分页面，我需要加载history.js，我想我需要在模板中写<script type="text/javascript" ng-src="{{exUrl1}}"></script>这些页面。但问题是，如果我们像这样延迟加载history.js，history.js 将无法解决哈希问题。我的测试表明，history.js 只有在index.html 中才有作用。这就是为什么我倾向于将history.js 留在index.html 中，但对/specific 页面禁用它。
所以尝试默认设置它并仅在不需要时将其删除..
问题是如何在默认情况下设置它（并确保history.js 有效）并在需要时将其删除。