SYNTAX_ERR: exception DOM 12 - Hmmm

Question

Je travaille sur un petit diaporama / affichage public pour un client qui utilise HTML5 Rock Diaporama code. J'ai couru dans un DOM à l'Exception de 12 une erreur de syntaxe qui est censé être liées à des sélecteurs CSS - tout monkeying autour avec elle... mais je ne peux pas le faire remonter à toutes les modifications que j'ai apportées dans le code. Je pense qu'il pourrait être quelque chose qui a été découvert que j'ai ajouté des fonctionnalités.

J'ai fait remonter jusqu'à cet objet (version live ici):

var SlideShow = function(slides) {
    this._slides = (slides || []).map(function(el, idx) {
      return new Slide(el, idx);
    });
    var h = window.location.hash;
    try {
      this.current = h;
    } catch (e) { /* squeltch */ }
    this.current = (!this.current) ? "landing-slide" : this.current.replace('#', '');
    if (!query('#' + this.current)) {
      // if this happens is very likely that someone is coming from
      // a link with the old permalink format, i.e. #slide24
      alert('The format of the permalinks have recently changed. If you are coming ' +
             'here from an old external link it\'s very likely you will land to the wrong slide');
      this.current = "landing-slide";
    }
    var _t = this;
    doc.addEventListener('keydown',
        function(e) { _t.handleKeys(e); }, false);
    doc.addEventListener('touchstart',
        function(e) { _t.handleTouchStart(e); }, false);
    doc.addEventListener('touchend',
        function(e) { _t.handleTouchEnd(e); }, false);
    window.addEventListener('popstate',
        function(e) { if (e.state) { _t.go(e.state, true); } }, false);
};

L'instanciation d' SlideShow() (ligne 521 en main.js):

var slideshow = new SlideShow(queryAll('.slide'));

Appelant queryAll('.slide') () retourne un tableau de toutes les diapositives avec une classe de .slide. Cependant, lors du passage d' queryAll('.slide') comme paramètre pour l'instanciation SlideShow(), elle renvoie un DOM Exception 12 d'erreur.

Personne n'a vu cela auparavant?

Answer 1

Vous êtes à l'utilisation illégale de id-attributs(illégale avant HTML5) à l'intérieur du document, par exemple: 2-slide . Les corriger.

Pour expliquer: pour résoudre le connu des débordements d' element.querySelectorAll() le sélecteur .slide sera réécrit en interne(à l'aide de l'id de l'élément). Il en résultera quelque chose comme ça:

#2-slide .moreselectors

...et les forces de l'erreur, car un ID ne peut pas commencer par un chiffre.

Voir le violon: http://jsfiddle.net/doktormolle/FGWhk/

Answer 2

Si vous venez ici après avoir recherché cette erreur dans les diapositives HTML5 Rocks:

Pour une raison quelconque, ils suppriment la classe «à construire» avec les éléments suivants:

 toBuild[0].classList.remove('to-build', '');
 

Cela casse tous les jeux de diapositives de la construction d'utilisation, même la démo de Google en ce moment est cassée

Changez simplement la ligne 220 de default.js en

 toBuild[0].classList.remove('to-build');
 

Tout est bien!

Answer 3

Dans mon cas, il utilisait self.postMessage (e.data); dans le fil principal lors de l'utilisation de travailleurs Web.

Je sais que ce n'est pas lié au problème du PO, mais c'est une erreur étrange, donc je laisse cela ici dans l'espoir que cela aide les autres.