Question

以下代码的想法是它有一个iframe（这是必要的，因为应用程序具有此html结构）。当父窗体体元素具有类'IntelligenceEnabled'时，iframe激活所有'a'标记名称警报的动作（“我聪明！”）;当班级不存在时，iframe上的链接将自动禁用。

问题是：代码运行良好，但有时当用户在切换（禁用/启用）后点击iframe中的“showMessage”链接时，这些链接会重定向到网址（facebook，yahoo，google ...）和没有显示消息。或者相反的效果，消息一直显示出来。

我做错了什么？（两者都在同一个域iframe和父窗口）

<html>
<script type="tex/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready( function() {

    $("body.IntelligenceEnabled #IamIntelligent").on( 'load', function() {
        $("body.IntelligenceEnabled #IamIntelligent").contents().delegate( '.showMessage', 'load', function() {
            alert("I'am intelligent");
            return false;
        });
     });

     $('#enableIntelligence').click( function() {
        $('body').addClass('IntelligenceEnabled');
        return false;
     });

     $('#disableIntelligence').click( function() {
        $('body').removeClass('IntelligenceEnabled');
        return false;
     });

});
</script>
<body>
<iframe id="IamIntelligent" src="/foo.html"></iframe>
<a href="#" id="enableIntelligence">Enable my intelligence!</a>
<a href="#" id="disableIntelligence">Make me gross!!!</a>
</body>
</html>

（/ foo.html）

<html>
<body>
<a href="http://www.google.com" class="showMessage">Google</a>
<a href="http://www.facebook.com" class="showMessage">Facebook</a>
<a href="http://www.yahoo.com" class="showMessage">Yahoo</a>
<a href="http://www.microsoft.com" class="showMessage">Microsoft</a>
</body>
</html>

Answer 1

U无法在加载时将事件委托给iframe内容，如

$("body.IntelligenceEnabled #IamIntelligent")

甚至没有执行。

使用以下代码获取您的功能。

$("#IamIntelligent").on( 'load', function() {
    $("#IamIntelligent").contents().delegate( '.showMessage', 'click', function(e) {
        if($(document.body).hasClass("IntelligenceEnabled")) {
            alert("I'am intelligent");
            return false;
        }
    });
 });

做一个iframe智能？

1 个答案: