2026年3月30日月曜日

☕Scriptタグからonloadに対して渡せる情報ってないですよね

 <script> タグの onload イベントは、通常そのスクリプトの読み込みが完了したことを検知するためのもので、直接パラメータを渡すことはできません。onload はただ単に「読み込みが完了した」というイベントです。

しかし、間接的に情報を渡すことは可能です。たとえば、スクリプトを動的に生成する際に、dataset 属性やカスタムプロパティを使って、追加情報を onload で取得する方法があります。以下はその一例です。

<script>
// スクリプトを動的に追加
const script = document.createElement('script');
script.src = "example.js";
script.dataset.info = "Hello, World!"; // カスタムデータを追加
script.onload = function() {
console.log(this.dataset.info); // onload時にカスタムデータを参照
};
document.head.appendChild(script);
</script>

この例では、dataset を使用して情報をスクリプトに関連付け、その情報を onload イベント内で参照しています。

example.jsからの情報はdatasetに代入できないですよね

そうですね、example.js の中で生成された情報を dataset に直接代入することはできません。dataset は基本的に HTML 要素のカスタムデータ属性を操作するためのものであり、JavaScript の実行中に生成されたデータは、dataset 経由で渡すことができません。

ただし、example.js 側で window オブジェクトやグローバルな変数を使用して、onload イベント内で動的に取得する情報を設定することが可能です。以下のように、example.js 内で window オブジェクトにデータを格納し、それを onload イベントで取得する方法が考えられます。

example.js

// スクリプト内でグローバル変数を設定
window.scriptData = { message: "Data from example.js" };

HTML 内の <script> タグ

<script>
const script = document.createElement('script');
script.src = "example.js";
script.onload = function() {
console.log(window.scriptData.message); // example.jsからのデータを取得
};
document.head.appendChild(script);
</script>

この方法で、example.js 内で設定された window のデータを onload イベントで取得することができます。