我已将以下iframe添加到页面中

<iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe>


chamara.html页面包含一个按钮,当我单击该按钮时,我需要当前页面覆盖过多的内容。

反馈是iframe中的按钮:


当我单击它时,我需要进行以下操作。



我尝试使用iframe绝对定位和z-index,但还无法正常工作。

最佳答案

哈哈,终于完成了演示! :P

好吧,走吧。如果仅在触发按钮时才需要iframe覆盖整个页面,则可以使用jQuery处理click事件。您需要使用contents()获取iframe内容,然后使用find()获取所需的元素。基本上是这样的:

$("#iframe").contents().find("#iframe_button").click(function () {
    // Button fired!
})


在iframe的所有页面上,我编写了这个CSS类:

.iframe_cover {
    position:absolute;
    top:0;
    left:0;
    width:100% !important;
    height:100% !important;
    border:0;
}


因此,当触发按钮时,iframe将具有此类。看:

$("#iframe").contents().find("#iframe_button").click(function () {
    $("#iframe").addClass("iframe_cover");
})




演示:http://rafaelalmeida.net78.net/exemplos/soen/29454285-iframe-button/

07-24 09:50
查看更多