Iframe-resizer: Not working with Require.js

[b-yond]

I have an iframe "product showcase" module that's injected into clients' pages with a single JS script tag.

I've noticed that clients with require.js see the error "ReferenceError: iFrameResize is not defined".
Since I don't have access to their servers, I'm not able to place the iframeResizer scripts into their web-reachable folders -- they're all served remotely from our server.

Is there a fix for this?
Thanks!

[mcat]

A similar issue occurs when including via npm

import iFrameResize from 'iframe-resizer';

[davidjbradshaw]

@mcat

import { iframeResizer } from 'iframe-resizer'

[davidjbradshaw]

Edit: Updated with suggest from @lonroth below.

@b-yond Think I have the solution.

var iFrameResizerPath = '/myPath/iframeResizer.min.js'

if (typeof require !== 'undefined') {
  require([iFrameResizerPath], function (iFrameResize) {
    iFrameResize()
  })
} else {
  var script = document.createElement('script')
  script.onload = function () {
    iFrameResize()
  }
  script.src = iFrameResizerPath
}

Or with ES6 it's bit nicer.

const iFrameResizerPath = '/myPath/iframeResizer.min.js'

if (typeof require !== 'undefined') {
  require([iFrameResizerPath], (iFrameResize) => iFrameResize())
} else {
  const script = document.createElement('script')
  script.onload = () => iFrameResize()
  script.src = iFrameResizerPath
}

[b-yond]

Thanks much, David. I managed to get this somewhat solved after I RTFM'd, but your solution is a little more elegant.

[davidjbradshaw]

@b-yond interested to know with what you came up with.

[b-yond]

It's not too different from yours, except that in my haste I put a condition in for the one client using require.js. The PHP that spits out my JS sees his API key, and deviates a little.

[davidjbradshaw]

Well if you have the time to try mine, as a guard against any more clients using require, then I'd love to know if it works.

[b-yond]

Will do. I'll report back when I have a chance to implement it.

[basnijholt]

I am running into the same problem I think.

I am trying to use iframe-resizer in an edX.org course and tried your suggestion.

This is the page with:

<script>
var isOldIE = (navigator.userAgent.indexOf("MSIE") !== -1); // Detect IE10 and below

iFrameResize({{
    heightCalculationMethod: isOldIE ? 'max' : 'lowestElement',
    minSize:100,
    log:true,
    checkOrigin:false
}});
</script>

and this is the page with:

const iFrameResizerPath = 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.14/iframeResizer.js'

if (require) {
  require([iFrameResizerPath], (iFrameResize) => iFrameResize())
} else {
  const script = document.createElement('script')
  script.onload = () => iFrameResize()
  script.src = iFrameResizerPath
}

I would really appreciate some help, I have been stuck on this issue for weeks.

Sorry for the horrible html, please blame EdX :|

[davidjbradshaw]

Looking at you errors in the console, it seems your having errors with other libraries. If you can make a simple test case with just require and iframe-resizer, I'd be interested to take a look.

In the meantime for iFrame-Resizer you could take the JS file and change these lines

if (typeof define === 'function' && define.amd) {
    define([],factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') { //Node for browserfy
    module.exports = factory();
} else {
    window.iFrameResize = window.iFrameResize || factory();
}

to just

window.iFrameResize = window.iFrameResize || factory();

[basnijholt]

It's hard to copy the webpage and put it somewhere else because it indeed generates many new errors.

However, this is the error that I get on the original page:

[basnijholt]

Actually, it seems like these people were having a very similar issue, where this fixed the issue.

Unfortunatly I am almost illiterate in javascript, so I am not able to judge if the cause was really require.js here.

[davidjbradshaw]

That is basically the same thing as I outlined above.

[lonroth]

@davidjbradshaw Actually your code above causes an error if require is not defined:
Uncaught ReferenceError: require is not defined

But by changing

if (require) {
  require([iFrameResizerPath], function (iFrameResize) {
    iFrameResize()
  })

to

if (typeof require !== 'undefined') {
  require([iFrameResizerPath], function (iFrameResize) {
    iFrameResize()
  })

your code works perfectly! 😊

[davidjbradshaw]

@lonroth thanks for this. I have updated my answer above. Just wondering if it is worth going a bit further and making it typeof require === 'function'.