如何使用 jquery 动态创建 iframe HTML

How to dynamically create iframe HTML using jquery

本文关键字：iframe HTML 创建 动态 何使用 jquery      更新时间：2023-09-26

我正在尝试开发一个jquery脚本，当您将鼠标悬停在表td上时，该脚本将打开一个包含网页的iframe。我基于如何在鼠标悬停在链接上的链接页面的小弹出窗口中显示实时预览？，依此类推，页面加载我想将表中的所有 url 转换为以下格式：

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

但是我不确定如何使用jquery构建此html。有人可以帮助我吗？

在 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）。这种情况没有解决方法。

这样的东西？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);
    });
});
相关文章：