ホームページ >ウェブフロントエンド >jsチュートリアル >.innerHTML の使用時にスクリプトが実行されないのはなぜですか?その修正方法は?
を含む要素 <script> を含むコンテンツを挿入する場合.innerHTML を使用してタグを要素に追加すると、スクリプトの実行が失敗することがよくあります。この問題は、静的な HTML を挿入する .innerHTML の固有の性質によって発生し、ブラウザーがその中のスクリプトを自動的に評価できなくなります。</script>
この問題に対処するには、挿入された HTML を直接操作して動的プロセスを作成する解決策が必要です。これは、ブラウザの <script> のデフォルトの動作を模倣します。 ES6 で書かれた 1 つのアプローチは、外部ライブラリや複雑な DOM 変更を行わずに、純粋な JavaScript を使用することに重点を置いています。すべての <script> を反復処理します。 </script>
このソリューションを使用するには、現在の .innerHTML 割り当てを setInnerHTML の呼び出しに置き換えるだけです。更新されたコードは次のようになります:function setInnerHTML(elm, html) { elm.innerHTML = html; Array.from(elm.querySelectorAll("script")) .forEach( oldScriptEl => { const newScriptEl = document.createElement("script"); Array.from(oldScriptEl.attributes).forEach( attr => { newScriptEl.setAttribute(attr.name, attr.value) }); const scriptText = document.createTextNode(oldScriptEl.innerHTML); newScriptEl.appendChild(scriptText); oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl); }); }
以上が.innerHTML の使用時にスクリプトが実行されないのはなぜですか?その修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。