使用 iframe 在表格中预览网页上的链接，但不使其成为表格的一部分？

Question

所以我想做的是在一个小框中显示你通过单击链接/按钮/图像获得的页面，就像链接的预览一样，我使用 iframe 来做到这一点，但 iframe 填满了我给 iframe 的表格按钮，并将所有内容移开，所以这就是你可以看到的全部。

我想要的更像是一种弹出预览，当鼠标悬停在我的表格中不移动显示的其他元素(并且有点覆盖当前页面)的按钮时。

我希望找到此Web功能的一些示例，但到目前为止还没有找到任何代码

Answer 1

这可以通过一些简单的jQuery事件处理程序轻松完成;正如您所描述的，我做了一个简单的示例来用表格和 iframe 来说明这一点。将鼠标悬停在表格中的单元格上会在鼠标首次将单元格悬停的位置显示一个 iframe，并根据悬停单元格的内容使用动态 URL： https://codepen.io/anon/pen/NYZXzr

由于iframe是绝对定位的，并且其top和left属性在调用时是动态设置的，因此它的显示不会移动table的内容，因为iframe本身不是table标记的一部分，而是在标记之外。

示例代码：

HMTL

<table id="myTable">
...(table contents)
</table>
<iframe id="myFrame" src="about:blank"></iframe>

JS/jQuery

$('#myTable td').mouseenter(function(event){
$('#myFrame').css({'top':event.pageY,'left':event.pageX}).prop('src','https://www.bing.com/search?q=' + event.target.innerText).show();
});
$('#myTable td').mouseleave(function(event){
$('#myFrame').hide().prop('src','about:blank');
});

.CSS

#myTable {
z-index:1;
}
#myFrame {
display:none;
position:absolute;
z-index:2
}

每次鼠标首次悬停(例如进入)该元素时，都会触发一次mouseenter处理程序;在这种情况下，#myTable中的任何td(例如表体单元格)。

处理程序 [1] 根据触发事件的鼠标坐标设置iframe位置(例如，将鼠标悬停在表格单元格时所在的 iframe 左上角)，[2] 根据悬停的单元格将iframesrc设置为动态 URL(在本例中为包含单元格内容的 Bing 查询)，[3] 显示iframe。

mouseleave处理程序实质上是相反的;隐藏 iframe 并将iframe的 URL 重置回空页面。

您需要的关键 CSS 是 [1] 确保iframez-index 高于table和 [2]position:absolute，以确保iframe根据设置的top&left属性显示在确切位置，而不是相对在页面流中。