Не загружать файл JS для определенного пути

У меня есть сайт mean-stack.

Обычно все мои внешние рекомендации перечислены в index.html

Я понимаю, что одна внешняя библиотека JS (например, https://cdnjs.cloudflare.com/troublelibrary.js) Я использую некоторые конфликты с частью моего веб-сайта. Поэтому обходной путь, который я ищу, - НЕ загружать его для определенного пути https://www.myexample.com/specific.

Кто-нибудь знает, как добиться этого в маршрутизации?

Редактировать 1: (см. полный вопрос здесь)

На самом деле, библиотека с конфликтом — это 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>

Затем, если я попробую следующий код, как предлагает Бен:

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

Таким образом, добавление сценария не совсем то же самое, что и прямая ссылка, кто-нибудь знает, почему?


javascript angularjs lazy-loading angular-ui-router html5-history
person SoftTimur    schedule 16.09.2017    source источник
comment
Так что, если вы находитесь на определенной странице, скрипт не загружается? И я предполагаю, что вы используете одностраничное угловое приложение?   -  person Ben Rondeau    schedule 16.09.2017
comment
Извините, я НЕ хочу загружать скрипт, если открою определенную страницу; для других страниц скрипт можно загрузить в самом начале. Я использую одностраничное угловое приложение.   -  person SoftTimur    schedule 16.09.2017
comment
Может ли пользователь перейти непосредственно на страницу проблемы, не переходя сначала на домашнюю страницу (или любую другую страницу)? Или им нужно перейти на определенную страницу (например, домашнюю страницу), прежде чем они смогут попасть на страницу с проблемами?   -  person Ben Rondeau    schedule 16.09.2017
comment
Не беспокойтесь об этом. Я буду использовать эту определенную страницу, и я не буду переходить оттуда на другие страницы; обычно пользователи вряд ли перейдут на эту определенную страницу.   -  person SoftTimur    schedule 16.09.2017
comment
Хорошо. Если пользователь сначала переходит на эту страницу, вы не можете загрузить скрипт (простое решение). Но если они сначала перейдут на другую страницу, а затем перейдут на страницу с проблемами, вам нужно будет удалить объект, созданный конфликтующей библиотекой, поскольку он уже будет загружен с предыдущей страницы. Затем вам нужно будет перезагрузить его на других страницах. Условное использование window.location, которое загружает/удаляет скрипт на основе вашего URL, должно работать.   -  person Ben Rondeau    schedule 16.09.2017
comment
Пользователи не будут переходить на страницу с проблемами. Это я буду использовать его. Можете ли вы дать решение, вы не можете загрузить скрипт (простое решение)?   -  person SoftTimur    schedule 16.09.2017
comment
См. опубликованный ответ   -  person Ben Rondeau    schedule 16.09.2017
comment
То, что Бен предложил в комментариях выше, кажется правильным способом найти обходной путь, который вы пытаетесь найти. Но я предлагаю сначала объяснить, с каким конфликтом вы столкнулись на конкретной странице, и попытаться его исправить. Предоставьте подробную информацию об ошибке, и мы посмотрим, есть ли способ избежать ее вместо использования обходного пути. Это будет правильно.   -  person Vivek Athalye    schedule 18.09.2017
comment
Вот конфликт и вот я не могу сделать так, чтобы предложение Бена всегда работало в моем случае.   -  person SoftTimur    schedule 18.09.2017

Ответы (3)


arrow_upward
3
arrow_downward

Я вижу вашу проблему в другом ракурсе. Вы упомянули, что используете history.js, чтобы избежать # в URL-адресе. Но для этого вам не нужно history.js. Я думаю, вы неправильно поняли свою проблему. Существует встроенная функция Angular, позволяющая избавиться от # путей. Потому что # используется для отслеживания относительного пути на любом маршруте. Если мы хотим, мы можем переопределить эту функциональность по умолчанию.

Но если вы используете этот подход, сервер должен перенаправить пользователя на index или home страницу в любом приложении route, поскольку Angular обрабатывает всю маршрутизацию в приложении.

Сначала вы должны добавить

<base href="/" />

в вашем HTML-файле.

Затем вы должны включить HTML5 Mode внутри приложения Angular следующим образом.

$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, сервер отвечает not found на /about. Это означает, что челка # удалена.

person Thusitha    schedule 21.09.2017
comment
Спасибо за это ... Но я знаю о режиме html5, и проблема в том, что мне нужно office.js в моем приложении (на большинстве страниц, но не в specific), что каким-то образом отключает html5, см. здесь, поэтому единственным известным мне обходным путем является добавление history.js после office.js. - person SoftTimur; 21.09.2017

arrow_upward
2
arrow_downward

Это один из способов сделать это:

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. Убедитесь, что сценарий неполадок не загружен где-либо еще на странице.

person Ben Rondeau    schedule 16.09.2017
comment
Иногда бывает какая-то ошибка, это не совсем так, как прямая ссылка. Пожалуйста, смотрите редактирование в моем ОП. - person SoftTimur; 16.09.2017
comment
Как насчет использования if(window.location.href !== 'https://localhost:3000/home' && window.location.href !== 'https://localhost:3000/#/home' )? - person Ben Rondeau; 16.09.2017
comment
Вы не поняли о чем я... home это не конкретная страница, при загрузке home надо добавить history.js. Мой первоначальный код (с прямой ссылкой) работает хорошо, тогда как если я добавлю history.js по-вашему, то он не всегда будет работать. Так что мой вывод таков, что ваш способ appending не совсем то же самое, что и прямая ссылка. Я не знаю почему. - person SoftTimur; 16.09.2017

arrow_upward
1
arrow_downward

вы можете сделать ленивую загрузку скрипта в angular

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

и где-то в вашем коде (на основе любой логики, которую вы хотите)

 $rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);
person harishr    schedule 22.09.2017
comment
Спасибо, это действительно способ поздней загрузки... Если для большинства моих страниц мне нужно загрузить history.js, я думаю, мне нужно написать <script type="text/javascript" ng-src="{{exUrl1}}"></script> в шаблоне этих страниц. Но проблема в том, что если мы загрузим history.js так поздно, history.js не решит проблему с хэшем. Мои тесты показывают, что history.js действует только тогда, когда находится в index.html. Вот почему я обычно оставляю history.js в index.html, но отключаю его для страницы /specific. - person SoftTimur; 22.09.2017
comment
поэтому попробуйте установить его по умолчанию и удалить, только если он вам не нужен. - person harishr; 23.09.2017
comment
Вопрос в том, как установить его по умолчанию (и убедиться, что history.js работает) и удалить его при необходимости. - person SoftTimur; 24.09.2017