滚动时在 iframe 中显示源 html

Question

我有一个数据库，其中一个字段包含网页的来源 html。我有一个 table 显示通向源 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>

当我滚动 table 中的 url 时，我想在 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 的 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 示例。

滚动时在 iframe 中显示源 html

Display source html in iframe on rollover

javascript

jquery

html

iframe