Question

我正在使用fancybox显示iframe并在点击按钮时将其关闭。这仅用于测试目的。关闭功能适用于IE和FF，但不适用于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>

单击“保存”或“取消”按钮时没有任何反应（它在FF和IE上关闭，并将焦点返回到上一页）。我查看了Chrome上的Javascript控制台，看看发生了什么，错误是：

未捕获的TypeError：无法读取未定义的属性'fancybox' （匿名功能）的onclick

我也试过“javascript：window.parent。$。fancybox.close（）;”代替。我不能在谷歌小组（fancybox的论坛所在地）询问，因为出于某种原因它在校园里被封锁了。

Answer 1

您在使用Same origin policy时遇到问题：框架页面在与父窗口不同的主机上提供。我的答案包括两个解决方案：

在onload ，http://jsfiddle.net/BYssk/1/

<iframe>

使用window.postMessage（参见答案底部，推荐），http://jsfiddle.net/5fGRj/1/

要解决此问题，您可以使用以下方法之一。这两种方法都要求框架中的页面在必须关闭时重新加载。这可以通过提交表格来实现。不需要onclick个处理程序。 预览两种方法：http://jsfiddle.net/BYssk/1/

1.如果您的iFrame嵌入在页面中：

<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.如果您的iFrame是动态创建的：

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

此方法背后的引擎：

加载框架内容后，会触发onload事件（1）。
当用户提交表单或退出框架内的页面时，会触发另一个onload事件（2）。
脚本在第一个onload事件中没有执行任何操作。但是，在第二个onload事件中，脚本调用$.fancybox.close()方法。

替代方法

另一种方法包括使用现代window.postMessage方法。它比以前的方法更可靠，并且在所有现代浏览器中都受支持。 小提琴：http://jsfiddle.net/5fGRj/1/

主窗口中的脚本：

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

框架页面中的必要代码：

<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()">

Answer 2

问题是jquery 1.9.1和旧的fancybox。使用fancybox 1.3.xx和jquery 1.8.x

或者只是更新最新版本的fancybox 2.1.x http://www.fancyapps.com/fancybox/#license

未捕获的TypeError：无法读取未定义的属性'fancybox' - 仅限Google Chrome错误？

2 个答案:

替代方法