https://www.bancobpi.pt/SitePublico_SiteBancoBPI/Blocks/CW_SP_Comm…/BlockUI_IFrame_Feedback_AjaxWait.js?30319

1  // Settings
2  var IframeContainerWait_Timeout = 300;    // delay (ms) before showing the spinner
3  var IframeContainerWait_MaxWait = 15000;  // fallback (ms) to avoid getting stuck
4
5  /**
6   * Blocks only the container while the iframe is loading.
7   * @param {HTMLIFrameElement} iframe - target iframe
8   * @param {HTMLElement} container - container to block
9   */
10  function attachContainerBlockToIframe(iframe, container) {
11    if (!iframe || !container) return;
12
13    var delayTimer = null;
14    var maxWaitTimer = null;
15
16    // Remove overlay and clear timers
17    function unblock() {
18      if (delayTimer) { clearTimeout(delayTimer); delayTimer = null; }
19      if (maxWaitTimer) { clearTimeout(maxWaitTimer); maxWaitTimer = null; }
20      if ($(container).unblock) $(container).unblock();
21    }
22
23    // Show overlay with a delay to avoid flashing on very fast loads
24    function blockWithDelay() {
25      if (delayTimer) return; // prevent duplicate timers
26      delayTimer = setTimeout(function () {
27        delayTimer = null;
28
29        // Spinner image (use real HTML, not escaped entities)
30        const messageHtml = '<img alt="" src="/LT_SitePublico/img/Lagarta.gif">';
31
32        // Center the spinner inside the container
33        var blockOptions = {
34          message: messageHtml,
35          css: {
36            border: 'none',
37            padding: 0,
38            backgroundColor: 'transparent',
39            width: 'auto',
40            left: '50%',
41            top: '50%',
42            transform: 'translate(-50%, -50%)',
43            textAlign: 'center'
44          },
45          overlayCSS: {
46            backgroundColor: '#fff',
47            opacity: 0.5
48          }
49        };
50
51        if ($(container).block) $(container).block(blockOptions);
52
53        // Fallback in case 'load' never fires (e.g., X-Frame-Options/CSP issues)
54        if (IframeContainerWait_MaxWait && IframeContainerWait_MaxWait > 0) {
55          maxWaitTimer = setTimeout(unblock, IframeContainerWait_MaxWait);
56        }
57      }, IframeContainerWait_Timeout);
58    }
59
60    // Bind a one-time 'load' handler to remove the overlay when the iframe finishes loading
61    function bindLoadOnce() {
62      var onLoad = function () {
63        unblock();
64        iframe.removeEventListener('load', onLoad);
65      };
66      iframe.addEventListener('load', onLoad, { once: true });
67    }
68
69    // Observe the iframe 'src' attribute (set/cleared) to trigger block/unblock
70    var mo = new MutationObserver(function (mutations) {
71      for (var i = 0; i < mutations.length; i++) {
72        var m = mutations[i];
73        if (m.type === 'attributes' && m.attributeName === 'src') {
74          var hasSrc = !!iframe.getAttribute('src');
75          if (hasSrc) {
76            blockWithDelay(); // BEFORE: show spinner only on the container
77            bindLoadOnce();   // AFTER: remove spinner on iframe 'load'
78          } else {
79            // 'src' was cleared → ensure spinner is removed
80            unblock();
81          }
82        }
83      }
84    });
85
86    mo.observe(iframe, { attributes: true, attributeFilter: ['src'] });
87
88    // Cleanup on page unload
89    $(window).unload(function () {
90      unblock();
91      mo.disconnect();
92    });
93
94    // Optional helpers to trigger programmatically
95    iframe.startLoad = function (src) {
96      // Force a change to ensure the observer catches it even if the same URL is set

97      if (iframe.src) iframe.src = '';
98      iframe.src = src;
99    };
100    iframe.clearLoad = function () {
101      iframe.src = '';
102    };
103  }
104
105  // Initialization: attach to ALL containers whose id contains "IframeWrapper"
106  document.addEventListener('DOMContentLoaded', function () {
107    var containers = document.querySelectorAll('[id*="IframeWrapper"]');
108
109    containers.forEach(function (container) {
110      // Find the iframe inside this container (can be OSInline or generic)
111      var iframe = container.querySelector('iframe');
112      if (!iframe) {
113        console.warn('Iframe not found in container', container.id || container);
114        return;
115      }
116
117      // Ensure the container can host a centered overlay (positioning)
118      var cs = window.getComputedStyle(container);
119      if (cs.position === 'static') {
120        container.style.position = 'relative';
121      }
122
123      attachContainerBlockToIframe(iframe, container);
124    });
125  });