Uncaught TypeError: Cannot read property 'fancybox' undefined - Google Chrome n'erreur?

J'utilise fancybox pour afficher une iframe et le fermer en cliquant sur un bouton. Ce n'est que pour des fins de test. La fermeture fonctionne sur IE et FF, mais pas sur Chrome.

    <title>Test</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

    <link rel="stylesheet" type="text/css" href="default.css" />
    <link rel="stylesheet" type="text/css" href="default2.css" />

</head>
<body id="editadd">
    <h1>Create</h1>
    <div class="centered">
        <fieldset>
        <legend>Details</legend>
            <p>Name:    <input type="text" /></p>
        </fieldset>
        <fieldset>
            <legend>Add Assignments</legend>
            <p>stuff</p>
                        <input type="text" value="stuff" />

            <br />
        </fieldset>
        <br />
        <input type="submit" OnClick="parent.$.fancybox.close();" value="Save"/>
        <input type="submit" OnClick="parent.$.fancybox.close();" value="Cancel"/>
    </div>
</body>

Après avoir cliqué sur Enregistrer ou d'Annuler bouton rien ne se passe (il se ferme sur FF et IE et renvoie le focus à la page précédente). J'ai regardé la console Javascript de google Chrome pour voir ce qui se passait et l'erreur est:

Uncaught TypeError: Cannot read property 'fancybox' undefined
(fonction anonyme)
onclick

J'ai aussi essayé "javascript:window.parent.$.fancybox.close();" à la place. Je ne peux pas demander à google groupes (où fancybox du forum se trouve) parce que, pour une raison quelconque, il est bloqué sur le campus.

  • Invoquer la console à l'aide de CTRL+MAJ+J. voyez-vous un message similaire à Unsafe JavaScript attempt to access frame with URL ....?
  • oui, je n'en fait.. j'ai juste pensé que c'était quelque chose avec webkit, puisque c'est ce que j'ai observé sur les résultats de google lors de la recherche pour les erreurs
  • Êtes-vous tester cette localement (url largeur de départ quelque chose comme file://...)?
  • oui, c'est le local sans wamp ou un serveur web installé
InformationsquelleAutor Nimchip | 2011-10-28
  1. 2

    Vous rencontrez des problèmes avec le Même la politique de l'origine: L'encadré de la page est servi sur une autre machine que la fenêtre parent. Ma réponse se compose de deux solutions:

    1. Fixation et de la manipulation d'un onload événement à la <iframe>, http://jsfiddle.net/BYssk/1/
    2. À l'aide de window.postMessage (voir en bas de répondre, recommandé), http://jsfiddle.net/5fGRj/1/

    Pour faire face à cela, vous avez peut utiliser l'une des méthodes suivantes. Les deux méthodes exige que la page dans le cadre de la recharge lorsqu'il doit être fermé. Ceci peut être réalisé par la soumission du formulaire. Pas de onclick les gestionnaires sont nécessaires. Aperçu de deux méthodes: http://jsfiddle.net/BYssk/1/

        1.  Si votre iFrame est intégré dans la page:

    <script>
var fancyboxClose = (function(){ //Define a function
    var loaded = 0;    //Define a local, "PRIVATE" counter
    return function(){ //Define a public method 
        //Increases the counter by one, modulo 2:
        //  Every "first" time, the "loaded++" returns an even number -> false
        //  When the page reloads again, the fancybox is submitted. The counter
        //     increases again -> odd number => modulo 2 = 1 => true
        if(loaded++ % 2) $.fancybox.close();
    }
})();
</script>
<iframe src=".." onload="fancyboxClose()"></iframe>

        2.  Si votre iFrame est créé dynamiquement:

    //The code below is executed inside some function. Definitely NOT globally
var loaded = 0;
$("<iframe>")                //Create frame
    .load(function(){        //Bind onload event
        if(loaded++ % 2) $.fancybox.close();
    })
    .attr("src", "...")      //Set src attribute
    .appendTo("body");       //Append the iframe, anywhere. For example: <body>

    Le moteur de cette méthode:

    1. Lorsque le cadre, le contenu est chargé, d'une onload événement est déclenché (1).
    2. Lorsque l'utilisateur soumet le formulaire, ou sort de la page à l'intérieur du cadre, l'autre onload événement est déclenché (2).
    3. Le script ne fait rien à la première onload événement. Lors de la deuxième onload cas cependant, le script appelle la $.fancybox.close() méthode.

    Méthode Alternative

    Une autre méthode consiste à utiliser le moderne window.postMessage méthode. Il est beaucoup plus fiable que la méthode précédente, et pris en charge dans tous les navigateurs modernes. Violon: http://jsfiddle.net/5fGRj/1/

    Script dans la fenêtre principale:

    function closeFancyBox(){
    $.fancybox.close();
}
window.addEventListener("message", closeFancyBox, false);

    Code nécessaire à l'intérieur de l'encadré de la page:

    <script>
function initiateClose(){
    parent.postMessage("Close fancybox please.", "*");
    //* should be more specific, for security reasons
    //See https://developer.mozilla.org/en/DOM/window.postMessage
}
</script>
PostMessage method<br />

<input type="submit" value="Inititate 'close'" onclick="initiateClose()">
    InformationsquelleAutor Rob W
  2. 0

    Le problème est jquery 1.9.1 et vieux fancybox. soit utiliser fancybox 1.3.xx avec jquery 1.8.x

    ou juste mettre à jour la dernière version de fancybox 2.1.x http://www.fancyapps.com/fancybox/#license

    InformationsquelleAutor STEEL