Javascript JS：单击iframe时调整div的大小？

我有一个完整的

，有一个

div

作为父级。那个iframe来自不同的领域。在单击iframe时，如何将其调整为比父div更大的大小（在我的例子中是添加类）？并在单击iframe的关闭按钮时重新调整其大小

我倾向于使用iframe中的按钮调整大小，但显然无法在iframe内部到达div，因此我必须在iframe外部执行此操作。

尝试以下操作：

document.getElementById("myIFrame").onclick = function(){    
    document.getElementById("myDiv").className = ""; //New Class Name
};

---

---

祝你好运 您必须创建某种覆盖来检测iframe的初始焦点事件。关闭按钮也可以是你的网站的一部分，如果你显示基于类

HTML

CSS

---

我也遇到了同样的问题，并编写了一个jquery插件。

参见示例：

如何使用：

$(document).ready(function ()
{
    $('iframe').iframeActivationListener();
    $('iframe').on("activate", function(ev) {
        $(ev.target).addClass("big");
    });
});

此插件不使用叠加div。
它检查鼠标是否位于非活动的iframe上，并开始查看文档的activeElement。 当它更改为另一个iframe时，将引发自定义事件“激活”

---

这是我找到的最好的解决方案。

不需要jquery（事实上，必须不需要）。我正在开发一个基于iframe的聊天小部件，所以我必须假设客户端没有jquery。我可以用js

className

来实现它。至于关闭按钮，它也不能在iframe之外。因此，基本上你是在为人们创建一个聊天插件，以便将其注入到他们的网站中。不是你的网站需要这个插件吗？是的，它已经完成了，谢谢你的帮助（顺便说一句，我有一个github repo，只是为了测试）

$("#overlay").click(function() {
    $("#iframe").addClass("big");
});

$("#close").click(function() {
    $("#iframe").removeClass("big");        
});

#iframe {
    width : 500px;
    height : 300px;
    position : relative;
}

#iframe.big {
    width : 600px;
    height : 400px;
}

iframe {
    width : 100%;
    height : 100%;
    border : none;
}

#overlay {    
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
}

#close {
    display : none;
}

.big #close {
    cursor : pointer;
    display : block;
    position : absolute;
    right : 10px;
    top : 10px;
    content : "X";
    background : red;
    color : white;
    border-radius : 25%;
    padding : 8px;
}

.big #overlay {
    display : none;
}

$(document).ready(function ()
{
    $('iframe').iframeActivationListener();
    $('iframe').on("activate", function(ev) {
        $(ev.target).addClass("big");
    });
});