通过 jQuery 进行数据处理后替换 iframe 的内容

Question

我有以下函数从服务器获取 HTML 模板并替换一些标签

$.ajax({
    url: "/newsletter/preview/1",
    data: {},
    success: function(data) {
        var template = data;
        var layer = $("<iframe>").attr({ "id": "preview_frame" });
        $("#newsletter .element input, #newsletter .element textarea").each(function() {
            var id = "\\$\\$"+$(this).parent().parent().attr("id").replace(/^newsletter_/, "")+"\\$\\$";
            template = template.replace(new RegExp(id, "g"), htmlspecialchars($(this).val(),2));
        });
        $("body").prepend(layer);
    },
    dataType: "html"
});

获取模板工作正常。还用表单内容替换标签（当将alert(escape(template)); 放在each 循环内时，我看到所有标签都被替换了）。但是还有两个未解决的问题：

• 我没有找到将变量 template 的内容设置到 iframe 中的方法 ($("#preview_frame").contents().find("body").html(template); 只会产生一个空框架）

• 将 iframe（变量 layer）添加到 HTML 正文中 在遍历表单字段期间，但必须在（！）之后完成 所有标签都已被替换，因此只有完整处理的模板将放置在 iframe 中。

Answer 1

我现在正在使用来自http://malsup.com/jquery/form/ 的 jQuery 表单插件。 所以我通过 Ajax 向服务器发送表单，服务器在成功发送表单后生成临时文件，通过 iframe 包含。

Answer 2

动态添加一个 ifame 源是您的 ajax 调用 url，并在 iframe 页面的 onload 中执行 javascript 操作。

$("<iframe/>").attr({
   source: "/newsletter/preview/1",
   id: "preview_frame"
}).appendTo($("body"));