JSP 中的 HTML 字符串处理

Question

我通过API从外部应用程序获取一些HTML，并将其保存在JSP变量中。
现在的问题是他们有一组单独的样式表，而我们的应用程序有不同的样式。
当我将他们的 HTML 嵌入div时，我的整个应用程序 UI 都会崩溃。
所以我试图创建一个iFrame并将其放在里面，但它仍然不起作用。
所以我把它分配给一个变量，并创建了一个javascript Blob，并将其附加为iFrame的src。这工作正常。

现在的问题是，我分配的变量包含此 HTML，并且我保留了它有一个输入hidden。

<input type="hidden" name="outsideHTML" id="outsideHTML" value='${htmlContent}'/>

传入的 HTML 有自己的DIV和样式。非隐藏元素显示在我们的页面上，即使输入元素类型为hidden。
所以我更改了它，并在它周围添加了一条div，并为输入分配了inherit可见性。但它仍然显示输入hidden内容。

<div style="display: none;"><input type="hidden" name="outsideHTML" id="outsideHTML" value='${htmlContent}' style="visibility: inherit;"/></div>

以下是我的IFrame：

<iframe id="htmlReportFrame" onload="resizeIframe(this)" scrolling="no"  style="overflow:hidden; min-width:985px; min-height:827px; border:0;"></iframe>
<script type="text/javascript">
var myPage = $('#outsideHTML').val();                       
var blob = new Blob([myPage], {type: "text/html"});
var blob_url = URL.createObjectURL(blob);
var blob_iframe = document.getElementById('htmlReportFrame');
blob_iframe.src = blob_url;
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>

任何人都可以阐明如何解决这个问题吗？
如果使用 IFrame 解决此问题不是解决方案，您可以建议一些选项吗？
我对传入的 HTML 没有句柄或控制权。

Answer 1

我认为如果你删除style="visibility: inherit;，它应该可以工作。检查以下示例并运行。

<div style="display: none;"><input type="text" name="outsideHTML" id="outsideHTML" value='${htmlContent}'/></div>