For my app i need to persist localstorage state between 2 subdomains. Long story short i found the only way to do this is to use an iframe. When I load my iframe in my app I hide it using css but the content still loads. Is there a way to load the iframe of the subdomain with as minimal content as possible to reduce app size and lag on the screen? I just need the iframe for setting localstorage dont need the entire app to load twice. Ie, is there a way to disable css and dont make network requests?
Two possibilities I can think of right now.
One possibility would be to fetch the DOM as text with JS fetch(). Then convert it into a DOM and load only the textContent.
And if it's only subdomains, no CORS problems should occur.
fetch('https://stackoverflow.com/questions/71880857/block-content-on-hidden-iframe')
.then(response => response.text())
.then(htmlString => {
//console.log('text',typeof htmlString)
let div = document.createElement('div');
div.innerHTML = htmlString.trim();
console.log("content",div.textContent)
});
The second possibility would be to check the request at the subdomains to see if it came from an iframe. If you are also the owner of the subdomains and it happens to be PHP on the server, you can for example check the request with PHP as follows:
if( isset($_SERVER['HTTP_SEC_FETCH_DEST']) &&
$_SERVER['HTTP_SEC_FETCH_DEST'] == 'iframe' )
{
$flag = true;
}
If true then you can use a flag to exclude the scripts and styles with a single IF condition.