Question

我正在尝试开发一个jquery脚本，当您将鼠标悬停在表td上时，该脚本将打开包含该网页的iframe。我基于How to show live preview in a small popup of linked page on mouse over on link?，所以在页面加载时，我想将表格中的所有网址转换为以下格式：

<a href="URL"></a><div class="box"><iframe src="URL" width = "500px" height = "500px"></iframe></div>

但是我不知道如何用jquery构建这个html。有人能帮助我吗？

Answer 1

在dom ready上，迭代表中的每个锚点，并使用insertAfter和一个字符串作为html

$(function(){
 $("table a").each(function(){
  $('<div class="box"><iframe src="' + this.href + '" width = "500px" height = "500px"></iframe></div>').insertAfter(this);
 });
});

然而，这可能并不理想，并且在某些情况下没有真正的方法来实现您正在寻找的东西。许多网站都会阻止像这样的跨域请求，对于那些网站，iframe预览将不起作用（例如Stack Overflow）。该方案没有解决方法。

Answer 2

这样的事情？ http://jsfiddle.net/swm53ran/176/

<table>
    <tr>
        <td>This is a Td</td>
        <td>This is a Td</td>
        <td class="hover">Hover over this td</td>
        <td>This is a Td</td>
    </tr>
    <tr>
        <td class="hover">Hover over this td</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>

$(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);
    });
});

如何使用jquery动态创建iframe HTML

2 个答案: