祝你好运！

Question

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

如果来自iframe的按钮调整大小，但显然无法在iframe中找到div，我更喜欢，所以我必须在iframe外进行。

Answer 1

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

使用方法：

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

此插件不使用重叠div 它检查鼠标是否处于非活动状态iframe并开始观察文档的activeElement。当它更改为另一个iframe时，自定义事件＆＃34;激活＆＃34;将被提出。

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

Answer 2

试试这个：

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

祝你好运！

Answer 3

您必须创建某种叠加层才能检测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;
}

Answer 4

使用

获取iframe中的值

jquery的

    $('#yourIframe').contents().find('#yourDiv').html();
    //you might have to use .val(), depending on browser or context

或javascript

http://www.w3schools.com/jsref/prop_frame_contentwindow.asp

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

4 个答案:

祝你好运！