【问题标题】：JS: Resize div when an iframe was clicked?JS：单击 iframe 时调整 div 的大小？
【发布时间】：2014-11-03 12:39:16
【问题描述】：

我有一个完整的 <iframe /> 和一个 div 作为父级。该 iframe 来自不同的域。单击 iframe 时，如何将父 div 的大小调整为更大（在我的情况下添加类）？并在点击 iframe 的关闭按钮时调整其大小？

我更喜欢iframe 中的按钮调整大小，但显然无法在 iframe 内部访问 div，所以我必须在 iframe 外部进行。

【问题讨论】：

标签： javascript iframe

【解决方案1】：

我遇到了同样的问题，写了一个 jquery 插件。 https://github.com/BergenSoft/iframeActivationListener

查看示例：
http://jsfiddle.net/56g7uLub/3/

使用方法：

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

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

这是我发现的最佳解决方案。

【讨论】：

【解决方案2】：

您必须创建某种叠加层来检测 iframe 的初始焦点事件。如果您根据类别显示，关闭按钮也可以成为您网站的一部分。

http://jsfiddle.net/cxtgn72g/4/

HTML

<div id="iframe">
    <div id="overlay"></div>
    <div id="close">X</div>
    <iframe src="//www.youtube.com/embed/6PRq7CmiWhM?list=PLIOa6mDiSeismsV_7YFti-5XOGRzmofSZ"></iframe>
</div>

JS - 需要 jQuery

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

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

CSS

#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;
}

【讨论】：

不需要jquery（事实上，一定不需要）。我正在开发一个基于 iframe 的聊天小部件，所以我必须假设客户端没有 jquery。我可以使用 js className 来实现它。至于关闭按钮，它也不能在 iframe 之外。
所以基本上你正在创建一个聊天插件供人们注入他们的网站。需要插件的不是你的网站吗？
是的，已经完成了，感谢您的帮助（顺便说一句，我有一个 github repo，只是为了测试）

【解决方案3】：

试试这个：

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

祝你好运！

【讨论】：