JqueryとCSSでiframeサイズを操作する

Question

jQueryリンクを使用してiframeのサイズを変更しようとしています。 これは私が使用するコードです：

.right_iframe { 
    width: 49%; 
} 
.right_iframe.active { 
    width: 20%; 
} 

<iframe align="left" width="49%" height="100%" src="page1.html"> 
</iframe> 
<iframe class="right_iframe" align="right" height="100%" src="http://www.msn.com"></iframe> 

その後、これはpage1.html

<a href="#" class="link">Link 1</a> 

であり、これはjQueryのです：あなたの助けのための

$(function() { 
    $("a.link").live("click", function(){ 
     jQuery(".right_iframe").addClass("active"); 
    }); 
}); 

Here's a live example

感謝みんな！

Answer 1

jQueryコードは、最初ののコンテキスト内で実行されているため、そのフレームのDOMにのみアクセスできます。その中には.right_iframeがありません。したがって、あなたのコードは何かをうまくターゲットにしていません。

あなたの目標を達成するために、「親」ドキュメント（両方のフレームを含む）のDOMを調べるようにjQueryに明示する必要があります。たとえば、クリックハンドラを次のように変更します。

$(window.top.document).find(".right_iframe").addClass("active");