So I have a window where there is an Iframe named containerframe
and within that iframe I have another iframe named pcpFrame
.
From pcpFrame Iframe I postMessage to raise a message event for the grandparent (parent iframe’s parent) using :
window.parent.parent.postMessage(message, '*');
In the grand-parent window I am listening to message
event and execute following piece of code :
window.addEventListener('message', function (e) {
// Get the sent data
let iframe = window.document.getElementById("frmRightSide");
console.log('data json', e.data)
let msg = JSON.parse(e.data)
if (msg?.refresh == true){
alert("updating iframe");
iframe.src = "https://codepen.io/pen/";
// iframe.contentWindow.location.reload(true);
alert("updated");
}
});
Expected behavior :
Initially the parent iframe (called containerFrame) has pre-loaded webpage with src="https://www.youtube.com/watch?v=qz0aGYrrlhU"
and after processing this message event I want to reload this parent iframe with updated src='https://codepen.io/pen'
Actually behavior :
What currently happens is that, this reloads the parent iframe (containerFrame) but instead of loading the iframe with updated src='https://codepen.io/pen/'
, it re-fetches the webpage with original iframe src='https://www.youtube.com/watch?v=qz0aGYrrlhU'
There are two strange things :
- After message event is processed (and not debugging) I saw some conflict through some console logging :
console.log(iframe.src) // prints updated src for codepen page
console.log(iframe.contentDocument.location) // prints previous src for youtube page
similar thing gets reflected in the HTML elements panel too :
<iframe id="frmRightSide" width="100%" frameborder="0" scrolling="auto" style="z-index: -1; overflow-x: hidden;" onload="setIframeHeight(this)" height="1119.2px" src="https://codepen.io/pen/">
#document (https://www.youtube.com/watch?v=qz0aGYrrlhU)
<html>
<! –– rest of the code removed as no issue here ––>
</html>
</iframe>
- If I do this while debugging the callback of message event, iframe loads page from upated src, i.e. codepen webpage