使用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，所以你的代碼沒有成功地定位任何東西。

您必須明確告訴jQuery查看「父」文檔（其中包含兩個框架）的DOM以實現您的目標。例如，將您的點擊處理程序更改爲：

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