次のコードのアイデアは、iframe を持っているということです (アプリケーションがこの html 構造を持っているため、これが必要です)。親ウィンドウの body 要素にクラス「IntelligenceEnabled」がある場合、iframe はすべての「a」タグ名に対してアラートのアクションをアクティブにします(「私はインテリジェントです!」); クラスが存在しない場合、iframe のリンクは自動的に無効になります。
問題は次のとおりです。コードはうまく機能しますが、ユーザーがスイッチ (無効/有効) の後に iframe の「showMessage」リンクをクリックすると、これらのリンクが URL (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>