1

次の関数でインポートform.htmlしindex.htmlています：

function importHTML() {
    let link = document.createElement('link');
    link.rel = 'import';
    link.href = 'form.html';
    link.onload = (e) => {
        console.log('Successfully loaded import: ' + e.target.href);
        importContent();
    }
    link.onerror = (e) => {
        console.log('Error loading import: ' + e.target.href);
    }
    document.head.appendChild(link);

    let importContent = () => {
        let importContent = document.querySelector('link[rel="import"]').import;
        if (importContent != null) {
            let el = importContent.querySelector('#formContainer');
            let container = document.body.querySelector('main');
            container.appendChild(el.cloneNode(true));
        }
    }
}

これは新しいlink rel="import"タグを作成し、headofに追加しindex.htmlます。リンクの読み込みが完了すると、コンテンツform.htmlが本体コンテナーに追加されます。

内部form.htmlには、ページネーション要素へのハンドルを取得してイベント ハンドラーをアタッチするスクリプトがあります。

<section id="formContainer">

    <form>
        ...
    </form>

    <!-- NOTE: pagination controls -->
    <div class="pagination">
        <span id="pageBack"><i>&lt;</i></span>
        <span id="pageForward"><i>&gt;</i></span>
    </div>

    <script>

        let importDoc = document.currentScript.ownerDocument;
        let pageForward = importDoc.querySelector('#pageForward');
        let pageBack = importDoc.querySelector('#pageBack');

        // these elements are present in the console at runtime
        console.log(pageForward, pageBack);

        pageForward.addEventListener('click', (e) => {
            console.log('click event heard on pageBack');
        });

        pageBack.addEventListener('click', (e) => {
            console.log('click event heard on pageBack');
        });

    </script>

</section>

私が抱えている問題は、コンソールにエラーが表示されていないにもかかわらず、イベント リスナーが起動しないことです。

これは読み込み順序と関係があるのではないかと考え、これを少し試して、スクリプトが解析される前にインポートが読み込まれるようにしましたが、これが期待どおりに機能しているかどうかについては 100% ではありません。

関数の後に動的にロードすることにより、演技スクリプトをメインドキュメントに移動することが機能することがわかりましたimportContent()が、フォームの関連スクリプトをインポート内にカプセル化したままにしたいと思います。

考え？

4

1 に答える 1