javascript - 鼠标悬停时在 iframe 中显示源 html

Question

我有一个数据库，其中一个字段包含网页的源 html。我有一个表格，显示了指向源 HTML 的 url。

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">URL1</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">URL1</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<div class="stuff">
</div>

当我将鼠标悬停在表中的 url 上时，我想在 iframe 中显示关联的 db HTML。

基于:

http://jsbin.com/urarem/3/edit?html,css,output

这似乎完全符合我的要求，我有:

$(document).ready(function() {
    $('.hover').on('mouseover', function() {
        var html = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';
        $('.stuff').html(html);
    });

假设我在鼠标悬停时将 html 源动态加载到变量“html”中，如何在上面的 Iframe 中显示它？

Answer 1

您只需获取value或innerHTML(取决于原始HTML的布局方式)，然后将其加载到src iframe 的。你可以这样做:

JS:

$('.hover').on('mouseover', function(e) {
    var url = $(this).html();
    $('.stuff').attr('src',url).show();
}).on('mouseleave', function(e) {
   $('.stuff').hide().removeAttr('src'); 
});

HTML:

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">www.wikipedia.com</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">www.google.com</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>
<iframe class="stuff">
</iframe>

JSFiddle示例。