javascript 未捕获的类型错误：无法读取未定义的属性“fancybox” - 仅限谷歌浏览器错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7932369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?
提问by Nimchip
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.
我正在使用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>
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:
单击“保存”或“取消”按钮后，没有任何反应（它在 FF 和 IE 上关闭并将焦点返回到上一页）。我查看了 Chrome 上的 Javascript 控制台，看看发生了什么，错误是：
Uncaught TypeError: Cannot read property 'fancybox' of undefined (anonymous function) onclick
未捕获的类型错误：无法读取未定义（匿名函数）onclick 的属性“fancybox”
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.
我也试过“javascript:window.parent.$.fancybox.close();” 反而。我无法在 google 群组（fancybox 的论坛所在的位置）中提问，因为由于某种原因它在校园内被屏蔽了。
回答by Rob W
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
onloadevent at the<iframe>, http://jsfiddle.net/BYssk/1/ - Using
window.postMessage(see bottom of answer, recommended), http://jsfiddle.net/5fGRj/1/
- 安装和操作的
onload在活动中<iframe>，http://jsfiddle.net/BYssk/1/ - 使用
window.postMessage（见答案底部，推荐），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 onclickhandlers are necessary. Preview of both methods: http://jsfiddle.net/BYssk/1/
为了解决这个问题，您可以使用以下方法之一。这两种方法都要求框架中的页面在必须关闭时重新加载。这可以通过提交表单来实现。不需要onclick处理程序。两种方法的预览：http: //jsfiddle.net/BYssk/1/
1. If your iFrame is embedded in the page:
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. If your iFrame is dynamically created:
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>
The engine behind this method:
此方法背后的引擎：
- When the frame's content is loaded, an
onloadevent is triggered (1). - When the user submits the form, or exits the page inside the frame, another
onloadevent is triggered (2). - The script doesn't do anything at the first
onloadevent. At the secondonloadevent however, the script calls the$.fancybox.close()method.
- 当加载框架的内容时，
onload会触发一个事件 (1)。 - 当用户提交表单或退出框架内的页面时，
onload会触发另一个事件 (2)。 - 该脚本在第一个
onload事件中不执行任何操作。onload然而，在第二个事件中，脚本调用该$.fancybox.close()方法。
Alternative method
替代方法
Another method consists of using the modern window.postMessagemethod. It's much more reliable than the previous method, and supported in all modern browsers. Fiddle: http://jsfiddle.net/5fGRj/1/
另一种方法是使用现代window.postMessage方法。它比以前的方法可靠得多，并且在所有现代浏览器中都受支持。小提琴：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()">
回答by STEEL
The problem is jquery 1.9.1 and old fancybox. either use fancybox 1.3.xx with jquery 1.8.x
问题是 jquery 1.9.1 和旧的fancybox。要么使用fancybox 1.3.xx 和jquery 1.8.x
or just update the latest version of fancybox 2.1.x http://www.fancyapps.com/fancybox/#license
或者只是更新最新版本的fancybox 2.1.x http://www.fancyapps.com/fancybox/#license
