绝对div覆盖iframe边界？

Question

我想知道是否有一种方法可以将绝对定位的div悬停在div所在的iframe的边界上。可以这样做吗？

我的情况： 我有一个iframe的文件列表，在每个文件的右端有一个按钮。我想要一个带有一些功能的div窗口，比如一个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，像父文档中操纵内容的的所以：

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

这允许您检测用户何时点击内部。然后你可以找出你的覆盖位置<div>。

您的覆盖<div>将需要有position: fixed集。您可以使用jQuery的.offset()方法获取的坐标以及在内部单击的链接。您可以使用这两个值来计算在父文档中将叠加层<div>的位置。例如，要覆盖定位到的左侧，在同一垂直水平为被点击，你可以做到这一点的链接：

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

请参阅本捣鼓它如何能工作的一个基本的例子： http://jsfiddle.net/Gxd3M/2/

（注意，这个假设父文档的内容和IFRAME都来自同一个服务器，即他们有same origin）