web-dev-qa-db-fra.com

SYNTAX_ERR: Exception DOM 12 - Hmmm

J'ai travaillé sur un petit diaporama/affichage public pour un client qui utilise le code de HTML5 Rock Code de diaporama . J'ai rencontré une exception DOM 12 - une erreur de syntaxe supposée être liée aux sélecteurs CSS - en fouinant avec elle ... mais je ne peux pas la remonter aux modifications apportées au code. Je pense que cela pourrait être quelque chose qui a été découvert lorsque j'ai ajouté des fonctionnalités.

Je l'ai tracé 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);
};

Instanciation de SlideShow() (ligne 521 dans main.js ):

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

L'appel de queryAll('.slide') renvoie un tableau de toutes les diapositives avec une classe de .slide. Cependant, lorsque vous transmettez queryAll('.slide') en tant que paramètre pour instancier SlideShow(), il renvoie une erreur DOM Exception 12.

Est-ce que quelqu'un a déjà vu ça?

javascripthtml5domsyntax-errordomexception
40
Isaac Lewis

Vous utilisez des attributs id illégaux (illégaux avant HTML5) dans le document, par exemple. 2-slide. Répare les.

Pour expliquer: Pour résoudre le mauvaise conduite connue de element.querySelectorAll(), le sélecteur .slide sera réécrit en interne (en utilisant l'identifiant de l'élément). Cela se traduira par quelque chose comme ça:

#2-slide .moreselectors

... et force l'erreur, car un identifiant ne peut pas commencer par un nombre.

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

53
Dr.Molle

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

Pour une raison quelconque, ils suppriment la classe 'to-build' avec les éléments suivants:

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

Cela brise tous les diapositives de la construction de l'utilisation, même la démo de Google est cassée

Il suffit de changer de ligne 220 de default.js to 

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

tout est bien!

9
wesbos

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

Je sais que cela n’a rien à voir avec le problème du PO, mais c’est une erreur étrange, je la laisse donc ici dans l’espoir d’aider les autres.

2
Drazisil

Même problème pour moi, mais dans mon cas, essayer d’obtenir des éléments de leur attribut

document.querySelectorAll('input[name="path"]')

et SYNTAX_ERR: L’exception DOM 12 s’est produite uniquement sur Safari. Je l’ai donc changé pour obtenir l’élément directement à partir de la classe et fonctionne maintenant correctement.

1
Martino

Vous pouvez échapper aux citations comme dans AppleScript, alors aucun problème sur Safari

do JavaScript "document.querySelector('span[" & attrName & "=\"" & attrValue & "\"]').click();"
0
vhanahrni