FlexMoster iFrame with ColorBox.js

On the ASPX side, a JavaScript library called colorbox.js is used, which opens another web app via URL where Flexmonster is managed.

It is more of an aesthetic choice than a functional requirement.

Since there are currently two separate web apps and the goal is to make them appear as a single one, I used this solution.

I’m also attaching the portion of JavaScript code used.

At the moment, I have used the “window.open” approach, which works but is not ideal, also because most browsers tend to block pop-ups.

 //$(document).on('click', '#btnOpenXQube', function () {
 //    $.colorbox({
 //        href: 'http://localhost/XlFlexMonsters',
 //        iframe: true,
 //        width: '90%',
 //        height: '85%',
 //        onComplete: function () {
 //            var iframe = document.querySelector('#colorbox #cboxLoadedContent iframe');
 //            console.log('iframe trovato:', iframe);

 //            if (!iframe || !window.__tabellaGenerataJson) return;

 //            var intervallo = null;
 //            var tentativi = 0;

 //            function ackHandler(e) {
 //                if (e.data?.type === 'TabellaGenerataJson_ACK') {
 //                    clearInterval(intervallo);
 //                    console.log('ACK ricevuto, stop tentativi');
 //                    window.removeEventListener('message', ackHandler);
 //                }
 //            }

 //            window.addEventListener('message', ackHandler);

 //            intervallo = setInterval(function () {
 //                tentativi++;
 //                iframe.contentWindow.postMessage(
 //                    { type: 'TabellaGenerataJson', payload: window.__tabellaGenerataJson },
 //                    '*'
 //                );
 //                console.log('postMessage inviato, tentativo', tentativi);

 //                if (tentativi >= 20) {
 //                    clearInterval(intervallo);
 //                    window.removeEventListener('message', ackHandler);
 //                    console.warn('postMessage: numero massimo tentativi raggiunto');
 //                }
 //            }, 500);
 //        },
 //    });
 //});