未捕获的TypeError:无法读取属性' fancybox'未定义-仅适用于Google Chrome的错误? [英] Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?
问题描述
我正在使用fancybox显示iframe，并在单击按钮时将其关闭.这仅用于测试目的.关闭功能适用于IE和FF，但不适用于Chrome.
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>
单击保存"或取消"按钮后，没有任何反应(在FF和IE上关闭，并将焦点返回到上一页).我在Chrome上查看了Javascript控制台，看看发生了什么，错误是:
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:
未捕获的TypeError:无法读取未定义的属性"fancybox" (匿名功能) onclick
Uncaught TypeError: Cannot read property 'fancybox' of undefined (anonymous function) onclick
我也尝试过"javascript:window.parent.$.fancybox.close();"反而.我不能在Google网上论坛(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.
推荐答案
您遇到了相同的问题来源政策:框架页面在与父窗口不同的主机上提供.我的答案包括两种解决方案:
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:
- 在
<iframe>， http://jsfiddle处附加和处理onload事件. net/BYssk/1/ - 使用
window.postMessage(请参阅答案底部，推荐)， http://jsfiddle.net/5fGRj/1/
- 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/
要解决此问题，您可以使用以下方法之一.两种方法都要求必须关闭框架中的页面.这可以通过提交表格来实现.不需要onclick处理程序. 两种方法的预览: http://jsfiddle.net/BYssk/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.如果您的iFrame嵌入在页面中:
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.如果您的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>
此方法背后的引擎:
- 加载框架的内容时，会触发
onload事件(1). - 当用户提交表单或退出框架内的页面时，将触发另一个
onload事件(2). - 该脚本在第一个
onload事件中不执行任何操作.但是，在第二个onload事件中，脚本将调用$.fancybox.close()方法.
- 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.
另一种方法包括使用现代的 window.postMessage 方法.它比以前的方法可靠得多，并且在所有现代浏览器中均受支持. 提琴: http://jsfiddle.net/5fGRj/1/
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/
主窗口中的脚本:
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()">
这篇关于未捕获的TypeError:无法读取属性&#39; fancybox&#39;未定义-仅适用于Google Chrome的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
