Question

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

我的情况：我有一个带有文件列表的iframe，每个文件的右端都有一个按钮。我想要一个div-popup，其中包含一些像contextmenu这样的函数。但是因为此按钮位于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中的事件，则可以在主窗口中重新创建上下文菜单，并使用iframe中div的相对位置+ 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。）

绝对div叠加iframe边框？

2 个答案: