Question

我正在一个应用程序中工作，我生成了一个包含mailbody的String，放置HTML格式。现在我想在一个类似浏览器的警报中显示输出。我在这里给我的代码

mailBody = "<html>"
                                  +"<center> "      
                                  +"<body style='background-color: #e5e4e2;'> " 
                                  +"<table id='mainTable' style='background-color: #ffffff; width: 70%; height: auto;margin-left: auto; margin-right: auto;'>" 
                                  +"<tr> " 
                                  +"<td> "      
                                  +"<table style='width: 100%;background-color: #2B547E; height: 50px; margin-top: 30px; margin-left: auto; margin-right: auto;'> " 
                                  +"<tr> " 
                                  +"<td width='50%'><img src=\"cid:image\" height='50' width='150' style='padding-left: 10px;'></td> " 
                                  +"<td width='50%' style='text-align: right; color: white; font-family: verdana; font-size: 12px;'> </td>" 
                                  +"</tr> " 
                                  +"</table> "  
                                  +"</td> " 
                                  +"</tr>" 
                                  +"</table> " 
                                  +"<table id='mainTable1' style='background-color: #ffffff; width: 70%; height: auto;margin-left: auto; margin-right: auto;'> " 
                                  +"<tr> "
                                  +"<td> "
                                  +"<table style='width: 100%; height: 50px; margin-top: 30px; margin-left: auto; margin-right: auto;'>" 
                                  +"<tr> " 

                                  +"<td width='50%' style='color:red;font-size:21px;'>Congratulations, "+rsServeResource.getString(1)+" </td> " 

                                  +"<td width='50%' style='text-align: right; color: white; font-family: verdana; font-size: 12px;'> </td> " 
                                  +"</tr> " 
                                  +"<tr> "
                                  +"<td style='font-size:18px;width:97%;font-style:italic'> "
                                  +emailText+" on "+interviewPhoneorOnsiteDate+" For " +rsServeResource.getString(2)+"  in   "+rsServeResource.getString(3)+" , "
                                  + "  You will be called at your mobile number "+rsServeResource.getString(4)    
                                  +"</td> "
                                  +"</tr> "
                                  +"</table> " 

                                  +"</td> "
                                  +"</tr> "
                                  +"</table> "
                                  +html
                                  +"<table id='mainTable2' style='background-color: #ffffff; width: 70%; height: auto;margin-left: auto; margin-right: auto; margin-top:12px;'>" 
                                  +"<tr> "
                                  +"<td style='font-size:18px; color:#2B547E;word-wrap: break-word;font-style: italic'> "

                                  +message

                                  +"</td> " 
                                  +"</tr> "
                                  +"</table> "
                                  +"<table  style='background-color: #ffffff; width: 70%; height: auto;margin-left: auto; margin-right: auto;'> "
                                  +"<tr> "
                                  +"<td style='font-size:18px;color:#2B547E;word-wrap: break-word;font-style: italic;font-weight: bold'> "
                                  +"Best Regards,"
                                  +"</td>"
                                  +"</tr>"
                                  +"<tr>"
                                  +"<td style='font-size:24px;color:#2B547E;word-wrap: break-word;font-style: italic;font-weight: bold'> "
                                  +consultantName
                                  +"</td>"
                                  +"</tr> " 
                                  +"<tr>"
                                  +"<td style='font-size:18px;color:#2B547E;word-wrap: break-word;font-style: italic; font-weight: bold'> "
                                  +"Client Service Manager"
                                  +"</td>"
                                  +"</tr> "                               
                                  +"</td>"
                                  +"</tr>"
                                  +"</table>"
                                  +"</body> " 
                                  +"</center> " 
                                  +"</html> ";

所以这就是我正在生成的字符串，从java现在我必须要做的事情我必须在一个引导带中显示它，它将给出确切的浏览器外观和感觉。

我在像

这样的jQuery响应中获取String

             searchResultArray.put(mailBody);
             jsonFeed.put("searchResultArray", searchResultArray);
             resourceResponse.setContentType("text/html");
             resourceResponse.setCharacterEncoding("UTF-8");
             resourceResponse.getWriter().write(jsonFeed.toString());

并且

 jQuery.getJSON(url+"&candidateId=" +candidateId+"&jobId="+jobId+"&text1="+text1+"&text2="+text2+"&text3="+text3+"&interviewVenue="+interviewVenue+"&interviewCC="+interviewCC+"&start-date="+startDate+"&interviewBCC="+interviewBCC+"&interviewCC="+interviewCC+"&interviewType="+interviewType+"&type="+type, function(data)  {  
    alert(data.searchResultArray)
});

返回完整HTML时的警告，我怎样才能获得类似感觉的浏览器？

Answer 1

我建议您创建自定义警告框并将带有jQuery的html嵌入其中。

例如制作一个div：

<div id="message"></div>

而不是将html放入其中：

$("#message").html(mailBody)

示例小提琴： https://jsfiddle.net/nszag875/

修改

更新了使用bootbox（引导程序警报）的小提琴。

https://jsfiddle.net/nszag875/3

Answer 2

您无法使用JavaScript的内置alert()方法来完成这项工作，它无法显示字符串以外的内容。为了您的目的，您可以使用一些JavaScript库或jQuery插件，例如jQuery Dialog（http://jqueryui.com/dialog），它使用jQuery UI。它需要你制作一个<div>并将你的字符串附加到该div。像这样：

$('#divYouCreated').html('Your string here');

正如你所说，你想要弹出你的信息，因为你可以使用模态框动画。

Answer 3

在我看来，你应该使用jquery功能将你的字符串数据作为DOM元素附加到DOM Tree 例如：

    var template = '<p> simple paragraph</p>'; // your string data
    var $template = $(template);
    $('#some-id').append($tamplate);

如何将String转换为html

3 个答案: