Débogage du contenu IFrame

Question

Je rencontre un problème avec une page qui fonctionne correctement, mais lorsqu'elle est intégrée dans un iFrame dans une page Web d'entreprise (que je ne contrôle pas), elle s'étouffe dans IE9 (mais pas IE8).

La page utilise jQuery pour effectuer un appel AJAX et KnockoutJS pour lier du contenu pour l'affichage. La page passe les paramètres dans une requête GET à mon serveur avec des réponses avec AJAX, et il semble qu'il s'étouffe quand il récupère les données du serveur.

$.ajax({ 
    url: this.serviceURL + parameters, 
    dataType: 'json', 
    success: callback, 
    timeout: 3000, 
    error: function (jqXHR, status, errorThrown) { 
     if (status == "timeout") { 
      error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later."); 
     } 
     else { 
      error("An error occurred while trying to communicate with the server.\n " + errorThrown); 
     } 
    } 
}); 

En IE9, j'ai toujours frappé « Une erreur est survenue ... » branche avec le errorThrown de « SyntaxError:: caractère non valide » Cependant, lorsque ce code exécute les données sont correctes et correctement formatées, qui ne me dit rien.

Quelqu'un at-il des suggestions sur la façon de résoudre ce problème? J'ai utilisé Fiddler pour regarder ce qui était envoyé et retourné par le serveur, et tout semble bien à cette fin.

Mise à jour: Après avoir dormi dessus pendant un moment, j'ai commencé frais aujourd'hui. Ce que j'ai déterminé que pour une raison quelconque, quand ma page est iframe, au lieu d'obtenir la réponse JSON:

"{"Foo":true,"Bar":true}" 

Je suis en fait d'obtenir (de forcer une erreur dans le gestionnaire d'erreurs que je puisse inspecter le état de la jqXHR.responseText) est:

" {"Foo":true,"Bar":true}" 

qui si, en utilisant la console, je tente de nourrir JSON.parse, me donne une erreur. Donc, la question est, d'où vient cet espace de pointe? Si je lance ceci dans Firefox, je vois la bonne réponse du serveur (pas d'espace) et si je l'exécute en dehors de l'iFrame, je ne vois pas d'espace principal. Donc, je ne pense pas que ça va venir côté serveur. Quelque part dans le désordre de JS en cours d'exécution sur la page parent et ma page, il insère un espace de premier plan.

Mise à jour 2: Un examen plus approfondi révèle que jqXHR.responseText.charCodeAt (0) est 65279, il est donc pas vraiment un espace (même si elle affiche un) est la marque de l'ordre des octets. Mais pourquoi est-il présent (et pas avant) et pourquoi est-ce que cela cause un problème?

Answer 1

Je ne pouvais pas comprendre la raison de ce problème, alors je l'ai piraté en ajoutant un convertisseur personnalisé à mon appel ajax. Je dois donc maintenant ceci:

 $.ajax({ 
      url: this.serviceURL + parameters, 
      dataType: 'json', 
      success: callback, 
      timeout: 3000, 
      converters: { "text json": HackyJSONConverter }, 
      error: function (jqXHR, status, errorThrown) { 
       if (status == "timeout") { 
        //alert("Timed out"); 
        error("The connection to the server timed out.\nEither the server is down or the network is slow.\nPlease try again later."); 
       } 
       else { 
        error("An error occurred while trying to communicate with the server.\n " + errorThrown); 
       } 
      } 
     }); 

Et mon convertisseur hacky ressemble à ceci:

function HackyJSONConverter(data) { 
     if (data[0] = 65279) { 
      // leading BOM - happens only with an iFrame in OT for some unknown reason 
      data = data.substring(1); 
     } 
     return JSON.parse(data); 
    } 

Il est extrêmement stupide, et je serais heureux si quelqu'un a une meilleure façon!