javascript - 动态使用 iframe 作为页面覆盖

我已将以下 iframe 添加到页面

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

chamara.html 页面包含一个按钮，当我单击该按钮时，我需要用覆盖层覆盖当前页面。

反馈是iframe内的按钮: enter image description here

当我点击它时，我需要发生如下所示的事情。

enter image description here

我尝试过 iframe 绝对定位和 z-index，但还没有任何效果。

最佳答案

哈哈，终于完成demo了! :P

好吧，我们走吧。如果您需要 iframe 仅在按钮被触发时覆盖整个页面，您可以使用 jQuery 来处理单击事件。您需要使用 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");
})

关于javascript - 动态使用 iframe 作为页面覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29454285/