iframe-resizer

Multiple iframes on the one page with iFrame Resizer

The docs for iFrame Resizer say:

When the resizer does not work using multiple IFrames on one page, make sure that each frame has an unique id or no ids at all.

I have chosen to give no ids to the iframes. My code is shown below. It works but I wanted to confirm that I am doing everything correctly. Specifically, I am calling iFrameResize() only once and with no arguments - is that ok?

<iframe src="https://example.com/frame1" scrolling="no"></iframe>
<iframe src="https://example.com/frame2" scrolling="no"></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.15/iframeResizer.min.js"></script>
<script>iFrameResize()</script>

Note: @david_bradshaw, I decided not to use ids, because in that case it was not clear how to call iFrameResize() - do we need to call it once for each iFrame? Please clarify. TIA

Solution

  • I suggest putting ID's in.

    Not sure if this will help.

    • Requires: iframeResizer.contentWindow.min.js to be loaded into the target frame.

    Reference: cloudflare.com (21-Jan-2018)

    Example

    <style>iframe{width: 1px;min-width: 100%;}</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html" scrolling="no"></iframe>
<script>iFrameResize({log:true}, '#myIframe')</script>

    Reference: davidjbradshaw (21-Jan-2018)

    NOTE: ID Being used to sent to resizer method.