AdminLTE
AdminLTE copied to clipboard
[BUG] IFrame double-initialized
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.
- 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)
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...)
This fix sounds dumb, but if I'm not wrong AdminLTE v2.4 has a similar fix for this issue.
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.