Question

我有一个db，其中一个字段包含webpages的源html。我有一个表格，显示导致源HTML的网址。

<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>

当我滚动表格中的网址时，我想在iframe中显示关联的数据库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的{{1}}中。你可以这样做：

JS：

iframe

HTML：

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

JSFiddle示例。

在翻转时在iframe中显示源html

1 个答案: