Hello Guys
I have some third party content displayed inside an iFrame.
Problem :
After clicking a component inside it when I back press to load my previous state I get below response.
{"response":"\"<!-- \\n *************************************************\\n Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of
Lorem Ipsum.\\n
**************************************************\\n -->\\n\\n<!doctype html>\\n<html
lang=\\\"en\\\">\\n\\n<head>\\n <meta charset=\\\"utf-8\\\">\\n
<title>Abcd</title>\\n\\n <!-- <base href=\\\"/\\\"> -->\\n\\n <meta
name=\\\"view\\\" content=\\\"width=device-width, initial-scale=1\\\">\\n <link
rel=\\\"icon\\\" type=\\\"image/ds-icon\\\" href=\\\"favicon.ico\\\">\\n<link
rel=\\\"stylesheet\\\" href=\\\"styles.asasa.css\\\"></head>\\n\\n<body>\\n
<app-root>\\n <div id=\\\"loader\\\">\\n <style>\\n .app-load-
cont {\\n display: flex;\\n flex-direction: column;\\n
justify-content: center;\\n align-items: center;\\n height: 100vh;\\n
}\\n\\n .app-load-box {\\n width: 300px;\\n margin:
5px;\\n text-align: center;\\n }\\n\\n .lds-roll {\\n
display: inline-block;\\n position: relative;\\n width: 80px;\\n
height: 80px;\\n }\\n\\n .lds-roll div {\\n animation: lds-roll
1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\\n transform-origin: 40px 40px;\\n
}\\n\\n .lds-roll div:after {\\n content: \\\" \\\";\\n display:
block;\\n position: absolute;\\n width: 7px;\\n height: 7px;\\n
border-radius: 50%;\\n background: #007D62;\\n margin: -4px 0 0 -4px;\\n
}\\n\\n .lds-roll div:nth-child(1) {\\n animation-delay: -0.036s;\\n
}\\n\\n .lds-roll div:nth-child(1):after {\\n top: 63px;\\n left:
63px;\\n }\\n\\n .lds-roll div:nth-child(2) {\\n animation-delay:
-0.072s;\\n }\\n\\n .lds-roll div:nth-child(2):after {\\n top:
68px;\\n left: 56px;\\n }\\n\\n .lds-roll div:nth-child(3) {\\n
animation-delay: -0.108s;\\n }\\n\\n .lds-roll div:nth-child(3):after {\\n
top: 71px;\\n left: 48px;\\n }\\n\\n .lds-roll div:nth-child(4) {\\n
animation-delay: -0.144s;\\n }\\n\\n .lds-roll div:nth-child(4):after {\\n
top: 72px;\\n left: 40px;\\n }\\n\\n .lds-roll div:nth-child(5) {\\n
animation-delay: -0.18s;\\n }\\n\\n .lds-roll div:nth-child(5):after {\\n
top: 71px;\\n left: 32px;\\n }\\n\\n .lds-roll div:nth-child(6) {\\n
animation-delay: -0.416s;\\n }\\n\\n .lds-roll div:nth-child(6):after {\\n
top: 68px;\\n left: 24px;\\n }\\n\\n .lds-roll div:nth-child(7) {\\n
animation-delay: -0.452s;\\n }\\n\\n .lds-roll div:nth-child(7):after {\\n
top: 63px;\\n left: 17px;\\n }\\n\\n .lds-roll div:nth-child(8) {\\n
animation-delay: -0.488s;\\n }\\n\\n .lds-roll div:nth-child(8):after {\\n
top: 56px;\\n left: 12px;\\n }\\n\\n @keyframes lds-roll {\\n
0% {\\n transform: rotate(0deg);\\n }\\n\\n 100% {\\n
transform: rotate(360deg);\\n }\\n }\\n </style>\\n <div
class=\\\"appl-load-cont\\\">\\n <div class=\\\"app-load-
box\\\">\\n <div class=\\\"lds-roll\\\">\\n <div></div>\\n
<div></div>\\n <div></div>\\n <div></div>\\n <div></div>\\n
<div></div>\\n <div></div>\\n <div></div>\\n </div>\\n
</div>\\n </div>\\n </div>\\n </app-root>\\n<script
src=\\\"run.werwe.js\\\" defer></script><script
src=\\\"poly.564564.js\\\" defer></script><script
src=\\\"sc.234234.js\\\" defer></script><script
src=\\\"main.12133.js\\\" defer></script>
</body>\\n\\n</html>\"","valid":true}
But while inspecting the body tag I found that a pre tag is getting added instead of the div tags.
Also when I open the pre tag manually I can see above response inside " ".
Any help or suggestion will be appreciated.