在翻转时在iframe中显示源html [英] Display source html in iframe on rollover

问题描述

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

I have a db with one field containing the source html of webpages. I have a table that shows the url that leads to the source 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 。

when I roll over a url in the table , I want to display the associated db HTML in an iframe.

基于：

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

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

which appears to do exactly what I want, I have:

$(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如上所述？

Assuming I dynamically load the html source into the variable 'html' on rollover , how do I display this in an Iframe as above?

推荐答案

您只需获得值或 innerHTML （取决于原始HTML的布局方式），然后将其加载到<$ c $的 src 中c> iframe 。你可以这样做：

You just get the value or innerHTML (depending on how the original HTML is laid out), and then load that into the src of the iframe. You can do it like this:

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！