javascriptiframe-resizer

Uncaught ReferenceError: define is not defined iframeResizer.contentWindow.js


Trying to make an iframe with a dynamic height. I know the question been raised before, but I can't get this to work.

I have a WordPress site, with a form i am trying to iframe on another, non-WordPress site.

On the website I have enqueued iframeResizer.contentWindow.js

My page with the iframe looks like this:

<script type='text/javascript' src="mysite.com/iframeResizer.js">
<style>iframe{width: 1px;min-width: 100%;}</style>
<iframe id="myIframe" src="https://testsite.com/test-form" scrolling="no"></iframe>
<script>iFrameResize({log:true, checkOrigin: false}, '#myIframe')</script>

However, this doesn't work.

In console i get this:

[iFrameSizer][Host page: myIframe] IFrame scrolling disabled for myIframe
[iFrameSizer][Host page: myIframe] [init] Sending msg to iframe[myIframe] 
(myIframe:8:false:true:32:true:true:null:bodyOffset:null:null:0:false:parent:scroll) targetOrigin: *

Uncaught ReferenceError: define is not defined
    at iframeResizer.contentWindow.js:1121
    at iframeResizer.contentWindow.js:1125

I can see the iframeResizer.contentWindow.js file in my iframe.

What am I doing wrong?


Solution

  • You're using the 'uncompiled' version of the code. Either use the files from https://github.com/davidjbradshaw/iframe-resizer/tree/master/js or use the files from one of the CDNs listed in the readme: https://github.com/davidjbradshaw/iframe-resizer#cdns