'AdminLTE JavaScript problem with iFrame Cannot read properties of null (reading 'autoIframeMode')

Im using AdminLTE free Bootstrap admin template for a simple web app.
In normal browser window everything is working. Im embedding the adminLTE based app via iframe.
I get constant errors when embedding adminlte html inside iframe. Error message:

Uncaught TypeError: Cannot read properties of null (reading 'autoIframeMode') IFrame.js:271
at e.t._initFrameElement (IFrame.js:271:45)
at S.fn.init.e._jQueryInterface [as IFrame] (IFrame.js:434:88)
at IFrame.js:445:27
at dispatch (jquery-3.6.0.min.js:2:43064)
at v.handle (jquery-3.6.0.min.js:2:41048) 

Its trying to append css class iframe-mode to body tag (code from adminlte.js)

_initFrameElement() {
    if (window.frameElement && this._config.autoIframeMode) {
      const $body = $('body')
      $body.addClass(CLASS_NAME_IFRAME_MODE)

Tried to turn off autoiframe mode for AdminLTE following its documentation. https://adminlte.io/docs/3.1/javascript/iframe.html
Added in html tag:

<script>  
$('.content-wrapper').IFrame({
  onTabClick(item) {
    return item
  },
  onTabChanged(item) {
    return item
  },
  onTabCreated(item) {
    return item
  },
  autoIframeMode: false,
  autoItemActive: true,
  autoShowNewTab: true,
  allowDuplicates: true,
  loadingScreen: 750,
  useNavbarItems: true
})  
</script>

This jquery is throwing an error: Uncaught ReferenceError: $ is not defined

How to turn off this appending of iframe-mode class to body tag?
(prevent automatic adminlte iframe mode)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source