Loading javascript has problem in order

[nbuy]

I tried XCL 2.3.2 with firefox.
Javascript loading is not in order.

XCL rendering.

<script type="text/javascript" src="//www.google.com/jsapi" crossorigin="anonymous"></script>
<script type="text/javascript" crossorigin="anonymous">
<!--
google.load("language", "1");
google.load("jquery", "1");
google.load("jqueryui", "1");
//-->
</script>
<script type="text/javascript" src="http://xcl23.localdomain/common/js/notify/notification.js"></script>
<script type="text/javascript" src="http://xcl23.localdomain/common/js/jquery.cookie.js"></script>

That excecuting my env(Local vm server centos and client ubuntu).

Not in order! Umm... How can resolve it.

[nbuy]

I asked ChatGPT. ;-)

In JavaScript, when reading multiple source codes, asynchronous processing is performed by default. This is because the load completion order is not constant because the load time varies depending on the network path.

However, it is also possible to perform the evaluation synchronously. To do this, you have to use APIs such as XMLHttpRequest and fetch to load all the source code you want to read and evaluate them in order.

Below is an example of synchronously loading and evaluating multiple source codes.

javascript:

function loadScriptSync(url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, false); // If the 3rd argument is true, it will be asynchronous processing
  request.send(null);

  if (request.status === 200) {
    eval(request.responseText);
  }
}

loadScriptSync('script1.js');
loadScriptSync('script2.js');
loadScriptSync('script3.js');

[nbuy]

I asked another solution and tested that.

Insert follow code on top in common/js/notify/notification.js:

// wait for eval jQuery
function waitForFunc(fn) {
    if (typeof fn !== 'undefined') {
        callback();
    } else {
        setTimeout(function() {
            waitForFunc(callback);
        }, 100);
    }
}
waitForFunc(jQuery);

Ok, looks good.

[nbuy]

No this is wrong.
Just worked depend timestamp reason.

[gigamaster]

Hi,
I did not get any notification, sorry. A request is made to GitHub team,
however, there is now a new block in the right of project page, ^_^'

[gigamaster]

I was using firefox developer untill a few months ago. To be honest, Edge team made a lot of improvements
on user interface and dev tools - even better than chrome - both, Chrome and Edge are using Blink browser engine with V8 JavaScript engine.

XCL デフォルト JavaScript について

レンダリング設定には、デフォルトで「ローカル優先」戦略があります
経験上、CDN の使用はお勧めしません
これは、CSP の新機能と、SRI が更新ごとにハッシュの更新を強制していたためです。

コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (Cross-site_scripting) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。 これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。

https://developer.mozilla.org/ja/docs/Web/HTTP/CSP

サブリソース完全性 (Subresource Integrity, SRI) は、 (CDN などから) 取得したリソースが意図せず改ざんされていないかをブラウザーが検証するセキュリティ機能です。 SRI を利用する際には、取得したリソースのハッシュ値と一致すべきハッシュ値を指定します。

https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity

[gigamaster]

システムに加えられた変更

• load html
• Defer javascript : guarantees the order of execution in which they are placed in the page.
• Async javascript: do not guarantee the order of execution (a script you included at the end of body may execute before the first script file in the header).

実際には、defer は DOM 全体を必要とするスクリプトや相対的な実行順序が重要なスクリプトに使用されます。 また、非同期は、カウンターや広告などの独立したスクリプトに使用されます。 また、それらの相対的な実行順序は重要ではありません。

[gigamaster]

従来のレンダリング システムを使用しているため、これを構成するのは少し難しい場合があります。 ただし、利用可能な優先設定があります。( PRIORITY, first, 1,2,...)

完全に制御するには、スクリプトを追加し、順序、遅延、非同期タグを設定するためのコントロール パネルのオプションがさらに必要です。

それ以外の場合は、テーマの「ヘッダー」と「本文」の下部にある JavaScript のコードを変更して、変更を加える必要があります。 これはユーザーフレンドリーではありません。これらの変数について: xoops_module_header および xoops_block_header

    <!-- Modules javascript -->
    <!--    <script defer><{$xoops_js|regex_replace:"/(\/\/\-\->|<!\-\-)/":""}></script>-->
    <!-- RMV: added module header -->
    <{if $xoops_isuser}>
    <{$xoops_module_header}>
    <{/if}>
    <!-- RMV: added block header -->
    <{* $xoops_block_header *}>

[gigamaster]

JavaScript をより細かく制御する必要がある場合は、 x-loader を使用します。
X-elfinder テンプレートで使用される例。

/**
 * Load CSS and JS from modules templates. 
 * Usage : 
 * */
 
 var ScriptLoader = new xloader([
 XOOPS_URL+"/common/js/simplemodal/css/basic.css",
 XOOPS_URL+"/common/js/simplemodal/js/jquery.simplemodal.js",
 XOOPS_URL+"/common/js/simplemodal/js/basic.js",
 ]);
 ScriptLoader.loadFiles();
 
/* @type {xloader} */