由服务器创建后在 div 中打开 html 文件答案

【问题标题】：open html file inside div after being created by the server由服务器创建后在 div 中打开 html 文件
【发布时间】：2013-10-22 11:13:18
【问题描述】：

我已经构建了一个 web 应用程序，在单击按钮时，一个名为 via ajax 的 servlet 会在上下文路径中的目录中创建一个 html file。

现在，完成 ajax 调用后，我需要在我的 div diffReport 中打开那个 html 文件。

这是我写的脚本

$(document).on('click', '#detect', function() {
var url = document.getElementById("url").value;

$(document).ajaxStart(function() {
      $("#loader").show();
});
$(document).ajaxStop(function() {
    $("#loader").hide();
});

$.ajax({
    url: 'diffReport?url='+url,
    success:function(data){
        $.ajax({
            type : 'GET',
            url : data,
            success : function(msg) {
                $('#diffReport').html(msg);

            }

        });
    }
   });
});

还有我的 div

<div id="diffReport" style="width:45.5%; height: 730px;float:right">
            <p>Diff report will load here....</p>
            <span id="loader">please wait..<br><img alt="loading..." src="resources/images/loader.gif"></span>
</div>

这就是我传递创建的 html 文件路径的方式

File reportDir = AutoUtils.createDirectory(contextPath+"/resources/htmlreports/");

DiffGenerator.createHtml(someParams,reportDir.getAbsolutePath());  //this creates file with name 'finalDiff.html'

response.getWriter().write(reportDir.getAbsolutePath()+"/finalDiff.html");  //copy the file path in response.

但在ajaxStop 之后没有加载任何内容。即使在控制台上也没有错误。

请提出建议。

【问题讨论】：

尝试添加错误功能并检查响应（注意mime类型）。另外，我建议您查看响应中的数据。使用 Fiddler 或 Chrome 开发者工具或 Firebug。
你说要打开新创建的文件，那么你想把那个html文件打开成动态创建的iframe吗？如果您只想动态添加带有指向新文件的链接的标记，我可以提供解决方案！

标签： javascript jquery html ajax servlets

【解决方案1】：

我有一个解决方案。我假设您成功通过 ajax 获取新创建的 html 页面的完整 url。比如我假设你新建的html文件的url是“http://jsfiddle.net/”，这个页面会通过iframe加载到div中。我为此创建了一个demo JSFIDDLE：

HTML：

<div id="iframe_div">
</div>

JS：

//url of newly created html file
var file_src = "http://jsfiddle.net/";

$('<iframe>')                      // Creates the element
.attr('src',file_src) // Sets the src attribute 
.attr('height',500)
.attr('width',500)
.appendTo('#iframe_div');

【讨论】：

是的，iframe 成功了。我已经实施了解决方案。