未捕获的TypeError：无法读取未定义的属性'fancybox' - 仅限Google Chrome错误？ [英] Uncaught TypeError: Cannot read property 'fancybox' of undefined - Google Chrome only error?

查看：204
本文介绍了未捕获的TypeError：无法读取未定义的属性'fancybox' - 仅限Google Chrome错误？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用fancybox显示iframe并在点击按钮时将其关闭。这仅用于测试目的。关闭功能适用于IE和FF但不适用于Chrome。





 < title> Test< / title> 
 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js>< /脚本> 
< script type =text / javascriptsrc =fancybox / jquery.fancybox-1.3.4.pack.js>< / script> 
< link rel =stylesheethref =fancybox / jquery.fancybox-1.3.4.csstype =text / cssmedia =screen/> 
 
< link rel =stylesheettype =text / csshref =default.css/> 
< link rel =stylesheettype =text / csshref =default2.css/> 
 
< / head> 
< body id =editadd> 
< h1>创建< / h1> 
< div class =centered> 
< fieldset> 
< legend>详情< / legend> 
< p>名称：< input type =text/>< / p> 
< / fieldset> 
< fieldset> 
< legend>添加作业< / legend> 
< p> stuff< / p> 
< input type =textvalue =stuff/> 
 
< br /> 
< / fieldset> 
< br /> 
< input type =submitOnClick =parent。$。fancybox.close（）;值= 保存/> 
< input type =submitOnClick =parent。$。fancybox.close（）;值= 取消/> 
< / div> 
< / body>



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


Uncaught TypeError：无法读取属性'fancybox'的undefined
（匿名函数）
onclick


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

解决方案

你使用同源政策时出现问题：框架页面的使用位置与父窗口。我的答案包括两个解决方案：


  1. 在此处附加和处理 onload 事件< iframe> ， http：// jsfiddle .net / BYssk / 1 /

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

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



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

 < script> 
 var fancyboxClose =（function（）{//定义一个函数
 var loaded = 0; //定义一个本地的PRIVATE计数器
 return function（）{//定义一个公共方法
 //将计数器增加1，模2：
 //每第一时间，loaded ++返回偶数 - > false 
 //当页面重新加载时再次，fancybox被提交。计数器
 //再次增加 - > odd number => modulo 2 = 1 => true 
 if（loaded ++％2）$ .fancybox.close（） ; 
} 
}）（）; 
< / script> 
< iframe src =..onload =fancyboxClose（）>< / iframe>

  &NBSP; 2.&NBSP;如果您的iFrame是动态创建的：

  //以下代码在某个函数中执行。绝对不是全局
 var loaded = 0; 
 $（< iframe>）//创建框架
 .load（function（）{// Bind onload event 
 if（loaded ++％2）$ .fancybox.close（） ; 
}）
 .attr（src，...）//设置src属性
 .appendTo（body）; //在任何地方附加iframe。例如：< body>

此方法背后的引擎：


  1. 加载框架内容后，会触发 onload 事件（1）。

  2. 当用户提交表单，或退出框架内的页面，触发另一个 onload 事件（2）。

  3. 脚本不在第一个 onload 事件中做任何事情。但是，在第二个 onload 事件中，脚本调用 $ .fancybox.close（）方法。



替代方法



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

  function closeFancyBox（）{
 $ .fancybox.close（）; 
} 
 window.addEventListener（message，closeFancyBox，false）;

框架页面内的必要代码：

 <脚本> 
函数initiateClose（）{
 parent.postMessage（请关闭fancybox，*）; 
 // *应该更具体，出于安全原因
 //请参阅https://developer.mozilla.org/en/DOM/window.postMessage 
} 
< /脚本> 
 PostMessage方法< br /> 
 
< input type =submitvalue =Inititate'close'onclick =initiateClose（）>


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.

解决方案

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:

  1. Attaching and handling an onload event at the <iframe>, http://jsfiddle.net/BYssk/1/
  2. 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:

  1. When the frame's content is loaded, an onload event is triggered (1).
  2. When the user submits the form, or exits the page inside the frame, another onload event is triggered (2).
  3. 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()">

这篇关于未捕获的TypeError：无法读取未定义的属性'fancybox' - 仅限Google Chrome错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆