HTML string handling in JSP

Question

I get some HTML from an outside application through an API, and I have it in a JSP variable.
Now the problem is they have a separate set of stylesheets and our application has a different style.
When I embed their HTML in a div , my whole application UI collapses.
So I tried to create an iFrame and placed it inside, but it still did not work.
So I assigned it to a variable and created a javascript Blob and attached that as an src for the iFrame. This worked fine.

Now the problem is, the variable that I have assigned contains this HTML, and I have kept it has an input hidden .

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

The incoming HTML has its own DIV and styles. The nonhidden elements are displayed on our page, even though the input element type is hidden .
So I changed it and added a div around it and assigned inherit visibility for the input. But it still, it displays the input hidden content.

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

Below is my 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>

Can anyone throw some light on how to solve this issue?
If using IFrame for this problem is not a solution can you suggest some options?
I have no handle or control on the incoming HTML.

Answer 1

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

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