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");

使用Jquery和CSS操作iframe大小

1 个答案: