jquery - 使用 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 代码在第一个 <iframe> 的上下文中运行，它只能访问该框架的 DOM。没有 .right_iframe在其中，因此您的代码无法成功定位任何内容。

您必须明确告诉 jQuery 查看“父”文档(包含两个框架)的 DOM 才能实现您的目标。例如，将您的点击处理程序更改为:

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