做一个iframe智能吗？答案

【问题标题】：Doing an iframe intelligent?做一个iframe智能吗？
【发布时间】：2013-03-15 19:56:07
【问题描述】：

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

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

我做错了什么？（两者都在同一个域 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>

【问题讨论】：

如果父框架能够检查 iframe 中的内容，那么想象一下当您浏览到“www.awesomesite.com”时会发生什么，它将 iframe 嵌入到您拥有的 www.yourbank.com在不同的标签上登录。

标签： php javascript jquery html iframe

【解决方案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;
        }
    });
 });

【讨论】：

是的，这就是解决方案！但我对此表示怀疑：例如，当您在 CSS 中编写规则时，例如 body.IntelligenceEnabled { background-color: red; } 和身体 { 背景颜色：白色；你知道，背景会自动改变而不使用 IF（验证），我正在尝试的是：像 CSS 一样。也许问题或想法是：如何使代码仅在 IntelligenceEnabled 将出现在 body 类中时才有效？。
实际上，在您的情况下，加载页面时不会调用onload 函数，因为$("body.IntelligenceEnabled #IamIntelligent") 不存在并且在添加.IntelligenceEnabled 之后不会进行调用。 CSS 选择器引擎的工作方式与 AFAIK 不同。