jquery 未捕获的类型错误：无法读取未定义的属性'fancybox'-Google Chrome唯一错误？

yqlxgs2m 于 2023-01-30 发布在 jQuery

关注(0)|答案(3)|浏览(135)

我使用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>

点击保存或取消按钮后，没有任何React（它在FF和IE上关闭，并返回到上一页）。我在Chrome上查看了Javascript控制台，看看发生了什么，错误是：
未捕获的类型错误：无法读取onclick上未定义（匿名函数）的属性'fancybox'
我也试过"javascript：窗口.父.$. fancybox. close（）;"我不能在google groups（fancybox论坛的所在地）里问，因为由于某种原因，它在校园里被屏蔽了。

jquery

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

3条答案

按热度按时间

3pmvbmvn1#

您在使用Same origin policy时遇到问题：带框架的页面与父窗口在不同的主机上提供。我的答案包括两个解决方案：
1.在<iframe>、http://jsfiddle.net/BYssk/1/上附加和处理onload事件
1.使用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>

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

替代方法

另一种方法是使用现代的window.postMessage方法，它比以前的方法可靠得多，并且在所有现代浏览器中都支持。Fiddle：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()">

赞(0）回复(0）举报 2023-01-30

56lgkhnf2#

问题出在jquery 1.9.1和旧的fancybox上。或者使用fancybox 1.3.xx和jquery 1.8.x
或者只是更新fancybox 2.1.x的最新版本http://www.fancyapps.com/fancybox/#license

赞(0）回复(0）举报 2023-01-30

628mspwn3#

如果你在一个特定的主机上登录WordPress，就像我在加载fancybox一样，在一个匿名的窗口或标签中注销或查看资源不会在Chrome开发者工具控制台面板中产生错误，而在登录时检查它。

赞(0）回复(0）举报 2023-01-30