如何在一个html页面中嵌入字符串格式的html并显示页面效果

myt 2017-05-31 01:34:28

场景：调用一个接口根据参数不同会返回不同的html字符串，我需要把这段返回的html在test.html中显示出来，直接在 test.html的div中显示接口返回字符串，整个test页面的样式会受到接口返回字符串中的样式的影响，所以考虑用iframe，这样就不会影响到test.html本身内容的显示，iframe方式如下，可是显示乱码了，求大神指点！！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>下面是嵌套的网页内容</h1>
<iframe width=100% frameborder=0 scrolling=auto src='data:text/html,接口返回的字符串'></iframe>
</div>
</body>
</html>

接口返回的html格式的字符串如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name=viewport content=width=device-width, minimum-scale=1, maximum-scale=1><meta content=yes name=apple-mobile-web-app-capable /><meta name=format-detection content=telephone=no><title></title></head><body><div class=mian_cont><div class=mian_cont_2><h2 style=TEXT-ALIGN: center; >适当性评估结果确认书（一式两份）</h2><table border=1 cellSpacing=0 cellPadding=0><tbody><tr><td width=40><P class=pbox01 style= text-align:center;>适当 </P><P class=pbox01 style= text-align:center;>性评 </P><P class=pbox01 style= text-align:center;>估结 </P><P class=pbox01 style= text-align:left;> 果</P></td><td ><P class=pbox03> 尊敬的客户（姓名/名称：<span style=text-decoration:underline>@CUST_NAME</span> 资金账号：<span style=text-decoration:underline>@CUACCT_CODE</span> ）</P><P class=pbox02> 您的风险承受能力等级为：（例如：<input type=checkbox @RATING_LVL_A disabled />激进型<input type=checkbox @RATING_LVL_B disabled />积极型<input type=checkbox @RATING_LVL_C disabled />稳健型 <input type=checkbox @RATING_LVL_D disabled />保守型 <input type=checkbox @RATING_LVL_E disabled />保守型（最低类别））；</P><P class=pbox02> 您拟投资的产品或拟接受的服务：</P><P class=pbox02> 风险等级为：（例如：<input type=checkbox @PRO_RISKLEVEL_A disabled />高风险<input type=checkbox @PRO_RISKLEVEL_B disabled />中高风险<input type=checkbox @PRO_RISKLEVEL_C disabled />中风险<input type=checkbox @PRO_RISKLEVEL_D disabled />中低风险<input type=checkbox @PRO_RISKLEVEL_E disabled />低风险）；</P><P class=pbox02> 投资期限为：（例如：<input type=checkbox @PRO_INVESTMENTPERIOD_A disabled />0到1年<input type=checkbox @PRO_INVESTMENTPERIOD_B disabled />1到5年<input type=checkbox @PRO_INVESTMENTPERIOD_C disabled />5年以上）；</P><P class=pbox02> 所属投资品种为：（例如：<input type=checkbox @PRO_INVESTMENTTYPE_A disabled />股票、混合型基金、偏股型基金、股票型基金等权益类投资品种<input type=checkbox @PRO_INVESTMENTTYPE_B disabled />债券、货币市场基金、债券基金等固定收益类投资品种<input type=checkbox @PRO_INVESTMENTTYPE_C disabled />期货、融资融券<input type=checkbox @PRO_INVESTMENTTYPE_D disabled />复杂金融产品 <input type=checkbox @PRO_INVESTMENTTYPE_E disabled />其他产品）。</P><P class=pbox02> 预期收益为：（ @PRO_EXINCOMENTYPE ）。</P><P class=pbox02>本营业部已经向您充分揭示了该金融产品或服务的风险。您的风险承受能力等级、拟投资期限、投资品种、预期收益等投资目标与该金融产品或服务风险等级、投资期限、投资品种相匹配。</P><P class=pbox02>本营业部就上述适当性评估结果与您进行确认，并建议您审慎考察该产品或服务的特征及风险，进行充分风险评估，自行做出投资决定。</P><div class=xybbox2_3> <p class=pbox02> 营业部盖章：<span></span></p> <p class=pbox02>日期：@YYYY年@MM月@DD日<span></span></p></div></td></tr><tr><td><P class=pbox01 style= text-align:center;>客户</P><P class=pbox01 style= text-align:center;>确认</P></td><td><P class=pbox03>公司名@ORG_NAME营业部：</P><P class=pbox02> 本人/本机构已认真阅读了贵营业部关于产品或服务的风险揭示书，并已充分了解该产品或服务的特征和风险，签署了风险揭示书。</P><P class=pbox02> 本人/本机构在此确认自身风险承受能力等级、拟投资期限、投资品种、预期收益等投资目标与该金融产品或服务风险等级、投资期限、投资品种、预期收益等投资目标相匹配。</P><P class=pbox01>本人/本机构投资该项产品或接受该项服务的决定，系本人/本机构独立、自主、真实的意思表示，与贵营业部及相关从业人员无关。</P><div class=xybbox2_3> <p class=pbox02>投资者签名或盖章：<span></span></p> <p class=pbox02>日期：@YYYY年@MM月@DD日<span></span></p></div></td></tr><tr></tbody></table><h2 style=TEXT-ALIGN: center; >产品或服务不适当警示及投资者确认书（一式两份）</h2><table border=1 cellSpacing=0 cellPadding=0><tbody><td><P class=pbox03 style= text-align:center;>风险等级、投资期限、投资品种、预期收益等投资目标不匹配警示</P></td><td><P class=pbox03> 尊敬的投资者（姓名/名称：@CUST_NAME 资金账号: @CUACCT_CODE ）</P><P class=pbox02> 您拟投资的金融产品或金融服务其投资期限为，可能无法满足您预期的流动性需求或导致其他额外风险；其投资品种为，可能与您确认的投资品种不一致；其风险等级为，高于您在客户风险评估中所显示的风险承受能力等级。投资该项产品，可能导致高出您自身承受能力的损失。</P><P class=pbox02> 我营业部就上述情况向您做出提示，并建议您应当审慎考察该产品的特征及风险，自行做出充分风险评估。</P><P class=pbox02>若您经审慎考虑后，仍坚持投资该产品，请签署下附投资确认书。</P><div class=xybbox2_3> <p class=pbox02>营业部盖章：<span></span></p> <p class=pbox02>日期：@YYYY年@MM月@DD日<span></span></p></div></td></tr><tr><td><P class=pbox03 style= text-align:center;>投资者确认书</P></td><td><P class=pbox03>公司名@ORG_NAME营业部：</P><P class=pbox02>本人/本机构已认真阅读了贵营业部关于产品或服务的相关提示，并已充分了解该产品或服务的特征和风险，充分知悉上述不匹配情况。</P><P class=pbox05>本人/本机构经审慎考虑后，仍坚持投资该项产品，并愿意承担该项投资可能引起的损失和其他后果。投资该项产品的决定，系本人/本机构独立、自主、真实的意思表示，与贵营业部及相关从业人员无关。</P><div class=xybbox2_3> <p class=pbox02>投资者签名或盖章：<span></span></p> <p class=pbox02>日期：@YYYY年@MM月@DD日<span></span></p></div></td></tr></tbody></table></div></div></body><style>body { margin: 0 auto; line-height:24px;font-size:12px;color:#000;background-color:#fff;font-family:Helvetica;-webkit-text-size-adjust: none;}.pbox01{TEXT-ALIGN: justify; MARGIN: 0cm 0cm 0pt; TEXT-JUSTIFY: inter-ideograph; font-weight:bold;}.pbox02{TEXT-ALIGN: justify; MARGIN: 0cm 0cm 0pt; TEXT-JUSTIFY: inter-ideograph; TEXT-INDENT: 21pt;}.pbox03{TEXT-ALIGN: justify; MARGIN: 0cm 0cm 0pt; TEXT-JUSTIFY: inter-ideograph; text-align:left; }.pbox05{TEXT-ALIGN: justify; MARGIN: 0cm 0cm 0pt; TEXT-JUSTIFY: inter-ideograph; font-weight:bold;TEXT-INDENT: 21pt; }.mian_cont{width:850px;padding:10px;}.mian_cont_2{width:820px;}.xybbox{height:45px;}.xybbox4{margin:left; width:100%; margin:0 auto; height:100%;} .xybbox2{ float:left;width:50%;} .xybbox2_2{ float:left;width:33%;}.xybbox2_3{ float:right;width:50%;}.mian_cont td{padding:8px;}em:after{font-size:24px;line-height:1;}.pbox04{ width:120px;border:1px solid #fff; border-bottom: 1px solid #333;}</style></html>

...全文

1505 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_36893477 2019-01-21

打赏
举报

这个ie不支持啊

weixin_40224166 2018-12-06

打赏
举报

<tr><td><img height=7 src=" <c:url value='/images'/>/arrow_01.gif" width=4></td><td>adfadf</td></tr>

myt 2017-05-31

打赏
举报

就是用 <iframe width=100% frameborder=0 scrolling=auto src='data:text/html,接口返回的字符串'></iframe>这种方式显示html字符串时，中文乱码了。刚刚已解决，需要<iframe width=100% frameborder=0 scrolling=auto src='data:text/html;charset=UTF-8,接口返回的字符串'></iframe>这样就没问题了，谢谢！