iframeiframe-resizer

IFrame not detecting CSS

I'm using iFrame Resizer by David J. Bradshaw.

Load css style from parent into IFrame. The height IFrame in parent showing before css style in IFrame is loaded.

in parent

<div style="max-width:500px;">
    <iframe src="https://dikarier.com" name="dikarier" id="dikarier" width="100%" scrolling="no"></iframe>
</div>

<script type="text/javascript" src="iframeResizer.min.js"></script>
<script type="text/javascript">
    iFrameResize({log:true});
</script>

in IFrame

<p class="HeightfromParent" style="padding:1em;background:#000;color:#fff;">&nbsp;</p>

<script>
window.iFrameResizer={
    targetOrigin:'http://localhost'
}
</script>
<script type="text/javascript" src="iframeResizer.contentWindow.min.js" defer></script>

No error, but I need IFrame height in parent show after css style in IFrame is loaded. Please help?

Solution

  • Avoid using localhost, it creates some extra security restrictions in the browser