I have a parent page that renders and iframe with varying sized body. However when the site is navigated to with out www
you get the following error:
599 Uncaught SecurityError: Blocked a frame with origin "http://example.com" from accessing a frame with origin "http://www.example.com". Protocols, domains, and ports must match.
The form renders in the iframe but it doesn't resize the scroll height correctly (I cannot have any scroll functionality on the iframe and requires the additional space towards the bottom of the frame).
This happens because of the following iframe/function on the page:
<iframe id="iframe1" src="http://www.example.com/virtual-directory" height="" width="300px" frameborder="0" onload="iframeLoaded()"></iframe>
<script>
function iframeLoaded() {
var iFrameID = document.getElementById('iframe1');
if (iFrameID) {
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 20 + "px";
}
}
</script>
I took a look at this post SecurityError: Blocked a frame with origin from accessing a cross-origin frame but I am not exactly sure where to implement that check to get this resize to function properly without introducing a security risk.