Question

我有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。

所以附加脚本与直接引用不完全相同，有人知道为什么吗？

Answer 1

我从不同的角度看待你的问题。您提到您使用history.js来避免在网址上#。但是你不需要history.js来做到这一点。我认为你以错误的方式理解你的问题。有一个内置的Angular功能可以摆脱#路径。因为#用于跟踪任何路线上的相对路径。如果我们想要，我们可以覆盖默认功能。

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

首先你应该添加

<base href="/" />

在HTML文件中。

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

$locationProvider.html5Mode(true);

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

以下是一个完整的例子。

＆＃13;

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);
    
}]);

＆＃13;

<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>

＆＃13;

正如您在上面的示例中看到的，当您点击about链接时，服务器会在not found上以/about回复。这意味着#爆炸已被移除。

Answer 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语句中指定的页面上加载故障脚本。确保不要在页面上的任何其他位置加载故障脚本。

Answer 3

你可以在角度

中延迟加载脚本

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

以及代码中的某个地方（基于您想要的任何逻辑）

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

不为特定路径加载JS文件

3 个答案: