问题描述

目前，ERP后台有很多跳转外部链接的地方，会直接打开一个tab显示。因为有些页面是适配手机屏幕显示，放在浏览器会超级大。不美观，因此提出优化。

修改前：

修改后：

思考过程

1、先看下代码：

log.info("skipOutHtml-跳转外部页面, method:{}, url:{}, args:{}, redirect:{}, 操作人Id:{}", url, method, args, redirect, getOwnUserId());
if(redirect){return new RedirectActionResult(url + "?" + getParamStr());
}
HttpServletResponse response = beat().getResponse();
byte[] b = HttpUtil.exec(response, url, method, args);
PrintWriter writer = response.getWriter();
writer.write(new String(b, "utf-8"));
writer.flush();
writer.close();

2、需要一个新页面，绘制一个区域。直接将外部页面，框起来。

3、一时不知如何下手，问问AI

提问：

代码1：
HttpServletResponse response = beat().getResponse();byte[] b = HttpUtil.exec(response, url, method, args);PrintWriter writer = response.getWriter();writer.write(new String(b, "utf-8"));writer.flush();writer.close();代码3：$(function (){getSkipHtmlStream();})function getSkipHtmlStream(){skipHtml('/common/skipOutHtml',{code: '$!{code}', orderNo: '$!{orderNo}', action: '$!{action}'})}代码4：
<div class="mobile-view">
<div class="mobile-view-content"><p>这里是手机视图的内容...</p>
</div>
</div>如上，进入页面后，我想加代码3，代码3是请求后台的接口，按照代码1的返回，我想将返回的外部html页面嵌入到 mobile-view-content 中。目前没法放到该区域，而是整个页面渲染了，丢失了指定的区域

如何解决(=选择方案)

AI方案1：

function skipHtml(url, data) {$.ajax({url: url,type: 'POST',data: data,success: function(response) {// 将响应内容插入到mobile-view-content中$('.mobile-view-content').html(response);},error: function(xhr, status, error) {console.error("加载失败:", error);}});
}$(function() {getSkipHtmlStream();
});function getSkipHtmlStream() {skipHtml('/common/skipOutHtml', {code: '$!{code}', orderNo: '$!{orderNo}', action: '$!{action}'});
}

调整后，会有跨域问题。

AI方案2：调整后端接口，显然不实际。

HttpServletResponse response = beat().getResponse();
byte[] b = HttpUtil.exec(response, url, method, args);
String htmlContent = new String(b, "utf-8");// 返回JSON格式
response.setContentType("application/json");
PrintWriter writer = response.getWriter();
writer.write("{\"html\": " + JsonUtil.toJson(htmlContent) + "}");
writer.flush();
writer.close();

AI方案3：

<div class="mobile-view"><div class="mobile-view-content"><iframe id="externalContent" style="width:100%; height:100%; border:none;"></iframe></div>
</div><script>
function getSkipHtmlStream() {var url = '/common/skipOutHtml?code=$!{code}&orderNo=$!{orderNo}&action=$!{action}';document.getElementById('externalContent').src = url;
}
$(getSkipHtmlStream);
</script>

完美解决。