絕對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）