Internet Explorer 11 中 AngularJS v1.3.20 的 InvalidStateError

Question

我已经为后端创建了一个带有 angularJS 和 PHP 的 Web 应用程序。我遇到了一个奇怪的错误，它偶尔会出现在 Internet Explorer 中。铬没有问题。我在应用程序的<main> HTML 元素上收到 InvalidStateError。发生错误时，应用程序崩溃。当我只在 1 台设备上打开应用程序时，我无法重现它。当我在多个设备上打开应用程序时，偶尔会发生错误。该应用程序包含一个登录名，为了进行测试，用户使用相同的用户名登录。我尝试使用随机用户名登录，因此用户不会使用相同的用户名登录。没有解决问题。我不知道问题是什么。也许是一个失败的请求，也许是一个服务器配置，也许是一个无法加载的文件。我不知道是什么触发了错误。各位大神能指点一下在哪里搜索这种错误吗？

查看以下错误：

InvalidStateError <main class="ng-scope" ng-if="!app.isMobile" data-ui-view="main">
{
  [functions]: ,
  __proto__: {
     [functions]: ,
     __proto__: { },
     ABORT_ERR: 20,
     code: <Permission denied>,
     constructor: { },
     DATA_CLONE_ERR: 25,
     DOMSTRING_SIZE_ERR: 2,
     HIERARCHY_REQUEST_ERR: 3,
     INDEX_SIZE_ERR: 1,
     INUSE_ATTRIBUTE_ERR: 10,
     INVALID_ACCESS_ERR: 15,
     INVALID_CHARACTER_ERR: 5,
     INVALID_MODIFICATION_ERR: 13,
     INVALID_NODE_TYPE_ERR: 24,
     INVALID_STATE_ERR: 11,
     message: <Permission denied>,
     name: <Permission denied>,
     NAMESPACE_ERR: 14,
     NETWORK_ERR: 19,
     NO_DATA_ALLOWED_ERR: 6,
     NO_MODIFICATION_ALLOWED_ERR: 7,
     NOT_FOUND_ERR: 8,
     NOT_SUPPORTED_ERR: 9,
     PARSE_ERR: 81,
     QUOTA_EXCEEDED_ERR: 22,
     SECURITY_ERR: 18,
     SERIALIZE_ERR: 82,
     SYNTAX_ERR: 12,
     TIMEOUT_ERR: 23,
     TYPE_MISMATCH_ERR: 17,
     URL_MISMATCH_ERR: 21,
     VALIDATION_ERR: 16,
     WRONG_DOCUMENT_ERR: 4
  },
  ABORT_ERR: 20,
  code: 11,
  constructor: { },
  DATA_CLONE_ERR: 25,
  DOMSTRING_SIZE_ERR: 2,
  HIERARCHY_REQUEST_ERR: 3,
  INDEX_SIZE_ERR: 1,
  INUSE_ATTRIBUTE_ERR: 10,
  INVALID_ACCESS_ERR: 15,
  INVALID_CHARACTER_ERR: 5,
  INVALID_MODIFICATION_ERR: 13,
  INVALID_NODE_TYPE_ERR: 24,
  INVALID_STATE_ERR: 11,
  message: "InvalidStateError",
  name: "InvalidStateError",
  NAMESPACE_ERR: 14,
  NETWORK_ERR: 19,
  NO_DATA_ALLOWED_ERR: 6,
  NO_MODIFICATION_ALLOWED_ERR: 7,
  NOT_FOUND_ERR: 8,
  NOT_SUPPORTED_ERR: 9,
  PARSE_ERR: 81,
  QUOTA_EXCEEDED_ERR: 22,
  SECURITY_ERR: 18,
  SERIALIZE_ERR: 82,
  SYNTAX_ERR: 12,
  TIMEOUT_ERR: 23,
  TYPE_MISMATCH_ERR: 17,
  URL_MISMATCH_ERR: 21,
  VALIDATION_ERR: 16,
  WRONG_DOCUMENT_ERR: 4
}
"<main class="ng-scope" ng-if="!app.isMobile" data-ui-view="main">"

这是我设置 UI 视图的类：

(function(){
'use strict';

/* @mindPreloads */
var image_structure = ['spritesheets/sheet_faq.png','spritesheets/sheet_global.png','spritesheets/sheet_globe.png','spritesheets/sheet_mission_select.png','spritesheets/sheet_mockups.jpg','spritesheets/sheet_progress.png','spritesheets/sheet_quiz.png','spritesheets/sheet_start_screen.png'];

angular
    .module('App')
    .config(Routes)
    .run(Routing);

Routes.$inject = ['$stateProvider', '$urlRouterProvider'];

function Routes($stateProvider, $urlRouterProvider)
{
    var defaultRoute = '/error/notfound';

    $urlRouterProvider
        .when('', '/login')
        .when('/', '/login')
        .otherwise(defaultRoute);

    $stateProvider
        .state('app', {
            'abstract': true,
            resolve: {
                authStatus: [
                    'AuthService',
                    function(authService) { return authService.authorise(); }
                ],
                preload: [
                    'Preloader',
                    function(Preloader) { return Preloader.loadImages(image_structure, 'sheet_faq', 'sheet_global', 'sheet_globe', 'sheet_mission_select', 'sheet_mockups', 'sheet_progress', 'sheet_start_screen'); }
                ]
            }
        })
        .state('notfound', createRoute('/error/notfound', '/error/notfound.html'))
        .state('denied', createRoute('/error/denied', '/error/denied.html'))

        // Authenticated routes
        .state('login' , createRoute('/login' , '/login/login.html', 'Login' , 'app'    , null))
        .state('logout', createRoute('/logout', ''                 , 'LogoutController', 'app', ['basic']))
        .state('home'  , createRoute('/home'  , '/home/home.html'  , 'Home'  , 'app', ['basic'], HomeRes.resolve))
        .state('quiz'  , createRoute('/quiz'  , '/quiz/quiz.html'  , 'Quiz'  , 'app', ['basic'], { preloadQuiz: ['Preloader', 'Communication', function(Preloader, Communication) { return Preloader.loadImages(image_structure, 'sheet_quiz') }]}))
        .state('debug' , createRoute('/debug' , '/debug/debug.html', 'Quiz'  , 'app', ['basic']))
        ;

}

Routing.$inject = ['$rootScope', 'HomeService', 'DebugService', 'DebuglistService', 'QuizService', '$location', 'Preloader'];

/* @ngInject */
function Routing($rootScope, homeS, debugS, debuglistS, quizS, $location, preloader)
{
    $rootScope.$on('$stateChangeStart', function(event, toState) {
        if(toState.name === "debug") {
            quizS.setMaxQuestionNumber(5);
            IN_DEBUG_QUIZ = true;
            debugS.setPages(debuglistS.getDebugList());
            quizS.reset();
            $location.path('/debug');
        }
    });

    $rootScope.$on('$routeChangeStart',   preloader.setResolveState(true,  true));
    $rootScope.$on('$routeChangeSuccess', preloader.setResolveState(false, true));
    $rootScope.$on('$routeChangeError',   preloader.setResolveState(false, true));
    $rootScope.$on('$stateChangeStart',   preloader.setResolveState(true,  false));
    $rootScope.$on('$stateChangeSuccess', preloader.setResolveState(false, true));
    $rootScope.$on('$stateChangeError',   preloader.setResolveState(false, true));
}

/**
 * Creates a new route
 * @todo   Move this code to a Provider so all modules can use it.
 *
 * @param  {string} url         Url the route should listen to
 * @param  {string} template    Path to template to display (without 'app') in the main view
 * @param  {string} controller  Controller to use (as 'vm')
 * @param  {string} parent      Parent route
 * @param  {array} permissions  Which permissions are required
 * @param  {object} resolve     Items to resolve
 * @return {object}             A route object
 */
function createRoute(url, template, controller, parent, permissions, resolve)
{
    var route = {data: {permissions: []}};
    if (template) {
        route.views  = {'main@': {templateUrl: 'app' + template}};
        if (controller) {
            route.views['main@'].controller   = controller;
            route.views['main@'].controllerAs = 'vm';
        }
    }
    if (parent)      { route.parent           = parent; }
    if (url)         { route.url              = url; }
    if (permissions) { route.data.permissions = permissions; }
    if (resolve)     { route.resolve          = resolve; }
    return route;
}
})();

Answer 1

Internet Explorer 11 不支持 HTML5 主标记（请参阅 http://caniuse.com/#search=main）。为了让它发挥作用，我想你需要这个解决方案：https://stackoverflow.com/a/35820454/3237604。

Answer 2

好的，所以我发现了问题！显然我正在尝试播放未加载的声音。

首先我的代码是：

function playButtonPressSound()
{
    click_audio.pause();
    click_audio.currentTime = 0;
    click_audio.play();
}

现在我的代码如下：

function playButtonPressSound()
{
    if(!isNaN(click_audio.duration)) {
        click_audio.pause();
        click_audio.currentTime = 0;
        click_audio.play();
    }
}

我对代码块进行了检查，以检查是否设置了声音的持续时间。如果设置了声音，这将返回一个数字，如果未设置声音，则返回 NaN。

致谢：audio.currentTime invalidStateError IE11, JS, HTML5