绝对 div 覆盖 iframe 边框？

Question

我想知道是否有办法让一个绝对定位的 div 悬停在 div 所在的 iframe 的边框上。可以这样做吗？

我的情况： 我有一个包含文件列表的 iframe，每个文件的右端都有一个按钮。我想要一个带有上下文菜单等功能的 div 弹出窗口。但是因为这个按钮位于 iframe 的边缘，所以绝对定位的 div 被放在 iframe 视口的后面/外面。我希望它覆盖在 iframe 之外的文档的其余部分中。

​<iframe width="100" height="100">
div would be in here, say 300 x 100 px.
</iframe>
overlayed div should be visible here as well, basically the div should overlay the iframe.​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 1

嗯，从技术上讲，你不能这样做。但是，如果您劫持了 iframe 中的事件，您可以在主窗口中重新创建上下文菜单，并使用 div 在 iframe 中的相对位置 + iframe 本身的绝对位置。

因此，总而言之，上下文菜单可以在 iframe 之外，并由 iframe 内的事件进行操作。

让我告诉你如何做到这一点。我没有你的代码，所以我只是在做一个非常粗略的概念证明。 :)

Example |代码

HTML

<iframe id='my_frame'></iframe>

<div id='copy_to_frame'>
    <ul id='files_list'>
        <li>data.dat</li>
        <li>manual.html</li>
        <li>readme.txt</li>
        <li>model1.obj</li>
        <li>human_model.obj</li>
    </ul>
</div>

<div class='context_menu'>
    <ul>
        <li>Delete</li><li>Open</li><li>Move</li><li>Copy</li>
    </ul>
</div>

Javascript

//Declare the necessary variables, good practice
var frame = $("#my_frame"),
    frame_contents = frame.contents(),
    frame_body = frame_contents .find("body"),
    copy_list = $("#copy_to_frame"),
    context_menu = $(".context_menu");

var bInside = false;

//Fill the iframe with a list
frame_body.html(copy_list.html());
copy_list.hide();
paint();

//Attach event handler for context menu popup etc.
$("#files_list li", frame_body).click(function(e){
    var $this = $(this);
    var rel_x = $this.position().left + $this.outerWidth() + 5,
        rel_y = $this.position().top + $this.outerHeight()/2 - context_menu.outerHeight()/2 - frame_body.scrollTop(),
        abs_x = frame.offset().left,
        abs_y = frame.offset().top;

    e.stopPropagation();

    context_menu.css({
        top: rel_y + abs_y,
        left: rel_x + abs_x
    });

    //Show the context menu in this window
    context_menu.show();
    paint($this);
});

//Hide when clicking outside the context menu
$(document).add(frame_body).click(function(){
    if(!bInside){
        context_menu.hide();
        paint();
    }
});

//Determine if mouse is inside context menu
context_menu.mouseenter(function(){
    bInside = true;
}).mouseleave(function(){
    bInside = false;
});

function paint(el){
    $("#files_list li", frame_body).css({
        "background-color": "white",
        "border": "1px solid transparent"
    });

    if(el){
        el.css({
            "background-color": "#ddecfd",
            "border": "1px solid #7da2ce"
        });
    }
}

CSS

#my_frame{
    position: absolute;
    border: 1px solid gray;
    width: 200px;
    height: 100px;
    top: 50%; left: 50%;
    margin-top: -62.5px;
    margin-left: -100px;
    z-index: 1;
}


.context_menu{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: white;
    z-index: 2;
}

.context_menu ul{
    border: 1px solid black;
    border-right: 0;
    display: inline-block;
}

.context_menu li{
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px;
    text-align: center;
    margin: 0px;
    cursor: default;
}

.context_menu li:hover{
    background-color: lightgray;
}

Answer 2

这是基于所提供的最少信息的一些猜测，但是...

您可以使用 jQuery 从父文档中操作 <iframe> 的 内容，如下所示：

$('#myFrame').contents().find('a').click(function() { /*...*/ });

这允许您检测用户何时点击了<iframe>。然后你就可以确定你的叠加层<div>的位置。

您的叠加层<div> 需要设置position: fixed。您可以使用 jQuery 的.offset() 方法获取<iframe> 的坐标以及在<iframe> 中单击的链接。您可以使用这两个值来计算覆盖<div> 在父文档中的位置。例如，要将叠加层放置在<iframe> 的左侧，并且与单击的链接处于同一垂直水平，您可以这样做：

$('#overlayDiv')
    .offset({
        left: $('#myFrame').offset().left - $('#overlayDiv').width(),
        top: $('#myFrame').offset().top + $(this).offset().top
    })

有关它如何工作的基本示例，请参阅此小提琴：http://jsfiddle.net/Gxd3M/2/

（请注意，这假定父文档和 iframe 的内容都来自同一个服务器，即它们具有same origin。）