問題描述
目前，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>完美解決。
總結思考
問題的答案很簡單，但是過程很有意思。我只是朦朧知道現狀和我想要的，AI一下。如何解決變為了如何選擇方案。換做之前，我會找一個前端幫忙看看，搞一下，現在我自己就可以。
