Question

这是Display source html in iframe on rollover的后续问题。我有一个db，其中一个字段包含webpages的源html。我有一个表格，显示导致源HTML的网址。

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td>URL1</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td >URL1</td>
        <td>This is a Td</td>
        <td>This is a Td</td>        
        <td>This is a Td</td>
    </tr>
</table>

当我滚动表中的url时，我想在td中插入动态创建的iframe中显示关联的db HTML。然后，当我滚动td时，我希望将原始内容插回到td。

基于：

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

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

   var html = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
 var iframe = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';

var contents = "";
$('td').on('mouseover', function(e) {
    contents = $(this).html();
    console.log(contents);
    if (contents.match("^http")) {
        $(this).html(iframe);
     $(this).attr('src',html).show();
    }}).on('mouseleave', function(e) {
   $(this).hide().removeAttr('src');
     $(this).innerHTML = contents;
});

请参阅

http://jsfiddle.net/kc11/ep0hjy1f/5/

不幸的是，没有创建iframe。我如何使这个工作？

附录：

进一步解释我有一个包含网址和相应的html的表：

id   url                          html
1   https://www.yahoo.com/        <!DOCTYPE html><html><body>.....
2   https://stackoverflow.com/     <!DOCTYPE html><html><body>.....

当我翻转包含https://stackoverflow.com/的表时，我想在iframe中显示数据库中相应的html。在小提琴中，我试图用以下方法模拟这个HTML：

var html = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";

Answer 1

这里有几个问题：

1）您正在寻找^http，但您网页上的网址不包含该前缀。

2）您在attr()而不是td内拨打iframe。

3）拼写错误。

4）在mouseleave期间调用hide()是不必要的，这会使你桌子的一部分消失。

var html = "<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>";
 var iframe = '<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>';

var contents = "";
$('td').on('mouseover', function(e) {
    contents = $(this).html();
    console.log(contents);
    if (contents.match("^http")) {
        $(this).html(iframe);
     $(this).find('iframe').attr('src',contents).show();
    }}).on('mouseleave', function(e) {
  // $(this).hide().removeAttr('src');
     $(this).innerHTML = contents;
});

另请注意，许多网站（例如google.com）都使用X-Frame-Options HTTP标头来阻止自身显示在iframe中（出于安全原因）。这就是为什么Google无法在您的网页上运行，但维基百科会这样做。

将表td动态更改为iframe

1 个答案: