web-dev-qa-db-fra.com

Uncaught URIError: URI malformé - Onglets de l'interface utilisateur jQuery sous Windows

J'utilise les onglets de l'interface utilisateur jQuery dans un environnement de développement Windows local. Je teste avec leur code de démonstration

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede ve</p>

  </div>
</div>

Le problème est que je reçois un "UCError non récupéré: URI mal formé" sur cette fonction:

function isLocal( anchor ) {
    return anchor.hash.length > 1 &&
        decodeURIComponent( anchor.href.replace( rhash, "" ) ) ===
Uncaught URIError: URI malformed
            decodeURIComponent( location.href.replace( rhash, "" ) );
}

Je suppose que cela est dû à l'URI sur l'environnement Windows qui ressemble à ceci:

file:///C:/Work/my%20project/yadda%20ac%E7%F5es%20yadda/submenu.html#tabs-1

Comment puis-je le faire fonctionner sur Windows local, étant donné que mes clients voudront le voir fonctionner avant la mise en production? J'ai testé et je sais que cela est dû au codage des caractères spéciaux sur l'uri (comme sur le mot "acções"). Est-il possible de le faire fonctionner même avec des caractères spéciaux?

Je sais que je peux résoudre ce problème simplement en supprimant ces caractères et en renommant le fichier/dossier, mais j'aimerais disposer d'une solution plus fiable pour le client, au cas où ils décideraient de renommer les dossiers à nouveau (et tout ce qui se passe CABOOM sur leur visage) ).

javascriptjqueryhtmljquery-uiuri
18
Catarina Lou

C'est une conséquence de la méthode decodeURIComponent, qui suppose que les octets codés en pourcentage de la chaîne donnée sont en UTF-8 (voir l'étape 4.d.vii.8 de l'opération Decode in sec. 15.1.3 d'ECMAScript). . Votre exemple de chaîne:

"file:///C:/Work/my%20project/yadda%20ac%E7%F5es%20yadda/submenu.html#tabs-1"

Contient les octets décodés en pourcentage 0xE7 0xF5, qui ne peuvent pas apparaître l'un après l'autre dans une chaîne UTF-8 valide (ils représentent les deux caractères çõ dans Windows-1252). En conséquence, decodeURIComponent lève une exception URIError.

Une façon de résoudre ce problème, que je n'ai pas encore testé, est de vous assurer que votre page Web est servie à l'aide du codage de caractères UTF-8, plutôt que de ISO-8859-1, ce qui, je suppose, est le comportement par défaut. 

Pour ce faire, incluez une balise META comme suit:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

(Bien que l'idéal soit d'inclure un en-tête Content-Type contenant le jeu de caractères, cela n'est généralement pas possible dans les tests locaux impliquant le système de fichiers.)

Et assurez-vous également que les pages Web elles-mêmes sont codées en UTF-8.

En outre, où votre exemple de chaîne apparaît-il sur vos pages Web? Comment est-il généré? Sur quel navigateur avez-vous testé le comportement? La réponse m'aidera à vous dire quoi faire.

14
Peter O.

Ceci est un bogue de jquery - http://bugs.jqueryui.com/ticket/9518 - présent pour les URL non-UTF8. J'ai eu le même problème et l'ai résolu. Comme je ne pouvais pas changer l'encodage de ma page en UTF-8, j'ai finalement corrigé mon jqueryui et utilisé la solution de Rainer Plumer comme solution de contournement, mais j'ai dû l'utiliser deux fois, car j'ai des paramètres URI contenant des URI codés. Donc ma solution était 

decodeURIComponent( unescape( unescape(s)) )

Plus généralement, il devrait probablement y avoir une boucle de répétition jusqu’à ce que, jusqu’à ce que vous obteniez le même résultat. Cette solution de contournement n'est pas une solution propre pour vous. La solution propre est posée ici: 

Soumettre le formulaire avec la méthode get en codage non UTF-8

PS: le patch complet de l'interface utilisateur jquery:

function isLocal( anchor ) {
        return anchor.hash.length > 1 && 
                decodeURIComponent( unescape( unescape( anchor.href.replace( rhash, "" ) ) ) ) ===
                        decodeURIComponent( unescape( unescape( location.href.replace( rhash, "" ) ) ) );
}
5
TMS

Quelque chose comme ça ?

s = "file:///C:/Work/my%20project/yadda%20ac%E7%F5es%20yadda/submenu.html#tabs-1";
decodeURIComponent( unescape(s) )
3
Rainer Plumer

J'ai eu ce problème moi-même. Je ne pouvais pas trouver un moyen de nettoyer ma chaîne source, alors j'ai simplement contourné l'exception pour que les données continuent à se charger .

try {
    myVal = decodeURIComponent(sourceVal);
} catch (err) {
    myVal = "";
}
0
Aryeh Beitz