AdminLTE icon indicating copy to clipboard operation
AdminLTE copied to clipboard

[BUG] IFrame double-initialized

Open dipterix opened this issue 3 years ago • 3 comments

Describe the bug I found a weird behavior on my application using IFrame plugin. When I click on element with iframe-fullscreen widget, the full screen fails to work.

Debug Initially I thought I didn't register IFrame correctly, but I was pretty much following the documentation. However, further debugging into this issue, I realized the toggleFullScreen was called twice.

So I injected some calls in AdminLTE.js to print out the calls. It turns out the new IFrame(...) was called twice, resulting in double _registerListeners.

image
  • The first line Running: var IFrame = /*#__PURE__*/function () {... only run once, meaning the library was correctly loaded and was only loaded once
  • 2 IFrame._jQueryInterface = function _jQueryInterface(config) {... suggest that $(...).IFrame() was called twice.
  • 2 _proto._setupListeners = function _setupListeners() { mean the listeners were double-registered

As a result, the listeners were called twice when I click on the full-screen button.

You can see that IFrame() was called twice, but I only have one IFrame call in my script. I removed my $('.content-wrapper').IFrame call. Now everything works fine.

Diagnose

The IFrame constructor is called by AdminLTE by default (with default options). Therefore, when users manually call $().IFrame in their code, the constructor is called again. (That's why when I removed my calls, the IFrame works fine, but when I added mine, the listeners were called twice)

There is a line in your _init() function this._setupListeners();. This line will register listeners every time the constructor is called, but the old listeners were not removed.

Environment (please complete the following information):

  • AdminLTE Version: v3.2.0 via npm
  • Operating System: macOS
  • Browser (Version): Chrome, Firefox (all latest)

dipterix avatar Jun 24 '22 17:06 dipterix

I added code to check whether the elements have been registered with listeners between these two lines https://github.com/ColorlibHQ/AdminLTE/blob/a55ded687ef0ef8c50465d218adcb761ce4b5f9e/build/js/IFrame.js#L286-L287

const initialized = $(this._element).data("setupListeners_initialized");
if(initialized !== undefined){
	return;
}
$(this._element).data("setupListeners_initialized", true);

This is probably a dumb fix, but it works in my case (kind of...)

dipterix avatar Jun 26 '22 00:06 dipterix

This fix sounds dumb, but if I'm not wrong AdminLTE v2.4 has a similar fix for this issue.

REJack avatar Jun 28 '22 17:06 REJack

I tested it but not got IFrame double initialized, but I've updated the IFrame Plugin may the bug is gone ;)

You will need to generate the new dist files.

REJack avatar Jun 29 '22 19:06 REJack