Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

问题

I'm using fancybox to display an iframe and close it upon clicking a button. This is only for testing purposes. The closing function works on IE and FF but not on 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>

Upon clicking the Save or Cancel button nothing happens (it closes on FF and IE and returns focus to the previous page). I looked at the Javascript console on Chrome to see what was happening and the error is:

Uncaught TypeError: Cannot read property 'fancybox' of undefined (anonymous function) onclick

I've also tried "javascript:window.parent.$.fancybox.close();" instead. I can't ask in google groups (where fancybox's forum is located) because for some reason it's blocked on campus.

回答1:

You're having trouble with the Same origin policy: The framed page is served at a different host than the parent window. My answer consists of two solutions:

Attaching and handling an onload event at the <iframe>, http://jsfiddle.net/BYssk/1/
Using window.postMessage (see bottom of answer, recommended), http://jsfiddle.net/5fGRj/1/

To deal with this, you've can use one of the following methods. Both methods requires that the page in the frame reloads when it has to be closed. This can be achieved by submitting the form. No onclick handlers are necessary. Preview of both methods: http://jsfiddle.net/BYssk/1/

1. If your iFrame is embedded in the 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. If your iFrame is dynamically created:

//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>

The engine behind this method:

When the frame's content is loaded, an onload event is triggered (1).
When the user submits the form, or exits the page inside the frame, another onload event is triggered (2).
The script doesn't do anything at the first onload event. At the second onload event however, the script calls the $.fancybox.close() method.

Alternative method

Another method consists of using the modern window.postMessage method. It's much more reliable than the previous method, and supported in all modern browsers. Fiddle: http://jsfiddle.net/5fGRj/1/

Script in main window:

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

Necessary code inside the framed 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()">

回答2:

The problem is jquery 1.9.1 and old fancybox. either use fancybox 1.3.xx with jquery 1.8.x

or just update the latest version of fancybox 2.1.x http://www.fancyapps.com/fancybox/#license

来源：https://stackoverflow.com/questions/7932369/uncaught-typeerror-cannot-read-property-fancybox-of-undefined-google-chrome

标签

javascript

jquery

fancybox