<iframe srcdoc="<html><head></head>IFrame<body></body></html>" height="50px"></iframe>
<div>
<button id="reload-btn">Reload</button>
</div>
<pre id="result-1"></pre>
<pre id="result-2"></pre>
const frame = document.querySelector("iframe");
let cWindow;
const printResult = (id) => {
const isEqual = cWindow === frame.contentWindow;
const value = cWindow.a;
document.getElementById(id).innerHTML = `contentWindow is equal: ${isEqual};\nvalue: ${value}`;
}
frame.onload = function onFrameLoad() {
cWindow = frame.contentWindow;
cWindow.a = "a";
printResult("result-1");
frame.onload = function () {
printResult("result-2");
}
// CodePen removes any `location.reload()` so will refresh the frame in a different way
// cWindow.location.reload();
cWindow.history.go(0);
}
document.getElementById("reload-btn").onclick = () => {
// CodePen removes any `location.reload()` so will refresh the frame in a different way
// frame.contentWindow.location.reload();
frame.contentWindow.history.go(0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.