AdminLTE JavaScript 问题与 iFrame 无法读取 null 的属性（读取 \'autoIframeMode\'）答案

【问题标题】：AdminLTE JavaScript problem with iFrame Cannot read properties of null (reading 'autoIframeMode')AdminLTE JavaScript 问题与 iFrame 无法读取 null 的属性（读取 \'autoIframeMode\'）
【发布时间】：2022-12-20 00:07:16
【问题描述】：

我将 AdminLTE 免费的 Bootstrap 管理模板用于一个简单的 Web 应用程序。
在正常的浏览器窗口中，一切正常。我通过 iframe 嵌入基于 adminLTE 的应用程序。
在 iframe 中嵌入 adminlte html 时，我不断出错。错误信息：

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)

它试图将 css 类 iframe-mode 附加到 body 标签（来自 adminlte.js 的代码）

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

尝试按照其文档关闭 AdminLTE 的 autoiframe 模式。 https://adminlte.io/docs/3.1/javascript/iframe.html
在 html 标签中添加：

<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>

这个 jquery 抛出一个错误：Uncaught ReferenceError: $ is not defined

如何关闭将 iframe-mode 类附加到 body 标签？
（防止自动adminlte iframe模式）

【问题讨论】：

通过将 AdminLTE 升级到 v 3.2.0 解决

标签： javascript php html jquery iframe

【解决方案1】：

要禁用此组件，您需要在加载模板 js 之前通过本地存储设置配置

localStorage.setItem('AdminLTE:IFrame:Options',JSON.stringify({autoIframeMode:false,autoItemActive:false}))

这将在插件初始化时加载：

static _jQueryInterface(config) {
    if ($(SELECTOR_DATA_TOGGLE).length > 0) {
      let data = $(this).data(DATA_KEY)

      if (!data) {
        data = $(this).data()
      }

      const _options = $.extend({}, Default, typeof config === 'object' ? config : data)
      localStorage.setItem('AdminLTE:IFrame:Options', JSON.stringify(_options))

      const plugin = new IFrame($(this), _options)

      $(this).data(DATA_KEY, typeof config === 'object' ? config : data)

      if (typeof config === 'string' && /createTab|openTabSidebar|switchTab|removeActiveTab/.test(config)) {
        plugin[config]()
      }
    } else {
      new IFrame($(this), JSON.parse(localStorage.getItem('AdminLTE:IFrame:Options')))._initFrameElement()
    }
  }

【讨论】：