将 table td 动态更改为 iframe

Question

这是的后续问题。我有一个数据库，其中一个字段包含网页的来源 html。我有一个 table 显示通向源 HTML 的 url。

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

当我滚动 table 中的 url 时，我想在动态创建的 iframe 中显示关联的数据库 HTML，插入到 td 。然后当我退出 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。我如何让它工作？

附录：

为了进一步解释，我有一个 table，其中包含 url 和相应的 html:

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

当我滚动包含 https://whosebug.com/ 的 table 时，我想在 iframe 中显示来自数据库的相应 html。在 fiddle 中，我试图用以下方法模拟此 html：

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

Answer 1

这里有几个问题：

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

2) 您在 td 上调用 attr() 而不是其中的 iframe。

3) 拼写错误。

4) 在 mouseleave 期间调用 hide() 是不必要的，并且会使 table 的部分内容消失。

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 header 来防止自己显示在 iframe 中（出于安全原因）。这就是为什么 Google 在您的页面上不起作用，但维基百科可以。

将 table td 动态更改为 iframe

Dynamically changing table td to iframe

javascript

jquery

html

iframe