Not load a JS file for a specific path

Question

Not load a JS file for a specific path

1.2k Views Asked by SoftTimur At 04 April 2025 at 16:12

I have a website by mean-stack.

Normally, all my external references are listed in index.html

I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.

Does anyone know how to achieve this in the routing?

Edit 1: (see the full question here)

Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of 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>

Then, if I try the following code, as Ben suggests:

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

I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.

So appending the script is not exactly the same as a direct reference, does anyone know why?

Original Q&A

There are 3 best solutions below

**Ben Rondeau** · Answer 1

This is one way to do it:

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

Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.

**Thusitha** · Answer 2

I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.

But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.

First you should add

<base href="/" />

in your HTML file.

Then you should enable HTML5 Mode inside Angular application as follows.

$locationProvider.html5Mode(true);

By adding these two attributes you can get rid off the # path and this is the recommended way.

Following is a complete example.

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>

As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.

**harishr** · Answer 3

you can do lazy loading of script in angular

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

and somewhere in your code (based on whatever logic you want)

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

Not load a JS file for a specific path

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULAR-UI-ROUTER

Related Questions in LAZY-LOADING

Related Questions in HTML5-HISTORY

Trending Questions

Popular # Hahtags

Popular Questions