2

ユーザーのサイトに埋め込むためにユーザーに提供する外部jsスクリプトがいくつかあります。個別に正常に動作しますが、同じページに2つ追加しようとすると、そのうちの1つがクラッシュします（コンソールでエラーは発生しません）。問題は、windows.onloadを数回呼び出すことにあると思います。

2つの埋め込みコードは次のようになります。

コード1

  <script type="text/javascript" src="http://example.com/widget.js"></script>
  <p><span class="punctis-social-widget"></span></p>

コード2

  <script type="text/javascript" src="http://example.com/poll.js"></script>
  <p><span class="punctis-poll-button"></span></p>

poll.jsとwidget.jsは、2つの単純な関数です。

poll.js

window.onload = function() {
   alert('IM POLL.js');
}

widget.js

window.onload = function() {
   alert('IM WIDGET.js');
}

同じページにコード1とコード2を挿入すると、このスクリプトの1つはロードされません。どうすればこれを解決できますか？

4

1 に答える 1

2

EventTarget.addEventListener()を使用する

同じページに 2 つの window.onload を持つことはできません。2 番目のものは最初のものをオーバーライドします。問題を解決するには、addEventListener代わりに複数を使用してください。同じものを置き換えるのではなく、機能を追加します。

これを交換するだけwindow.onload=function(){}

これでwindow.addEventListener("load", function(evt) { /* do something */ })

説明：

let el = document.getElementById('a'); // window in your case

el.addEventListener('click', function(evt) { /* do task 1 */ });
el.addEventListener('click', function(evt) { /* do task 2 */ });

//similarily for window
window.addEventListener("load", function(evt) { /* do task 1 */})
window.addEventListener("load", function(evt) { /* do task 2 */})
于 2021-08-17T07:40:46.190 に答える