Javascript 无法从其他页面链接到包含书签的innerHTML

我使用JavaScript AJAX将cards.html文件包含到父html页面index.html中。
附带的cards.html文件是一个卡片列表，每张卡片中都有一个书签，格式为

。 当我从另一个页面超链接到书签时，浏览器不是定位在书签上，而是定位在页面顶部。 如果我手动将cards.html插入index.html，超链接将正常工作。 浏览器似乎不知道这些书签，因为它们是通过AJAX导入的，而不是加载index.html时存在的

index.html中包含Cards.html。

    <section id="cards">
    <!-- INSERT CARDS HERE -->
    <ul>
    <li id="byx-123_shapes" class="byx-book-tile byx-box">
    
        <figure>
            <img src="books/123_shapes/res/icon.png">
        </figure>
        
        <h2>
            123 Shapes
        </h2>
        <p>
            Placeholder for a book that is still being written.
        </p>
        <a href="previews/123_shapes_view.html">Preview Book</a>
    </li>

    .... more cards ...

    <li id="byx-zoo_friends" class="byx-book-tile byx-box">
        
        <figure>
            <img src="books/zoo_friends/res/icon.png">
        </figure>
        
        <h2>
            Zoo Friends
        </h2>
        <p>
            Placeholder for a book that is still being written.
        </p>
        <a href="previews/zoo_friends_view.html">Preview Book</a>
    </li>
    </ul>
    </section>
...

通过AJAX包含时不起作用，但手动插入卡时起作用的超链接示例

https://...//index.html#byx-zoo_friends

---

有人能解释一下为什么会发生这种情况以及如何修复它。

当你加载

index.html#bookmark

时，它会在加载页面后立即尝试滚动到书签。但是AJAX请求尚未完成，因此没有加载书签

插入HTML后，您应该将代码放入

xhr.onload

函数中以滚动到书签

xhr.onload = function() {
    if (this.status == 200) {
        cards.innerHTML = xhr.responseText;
        if (window.location.hash) {
            let target = document.querySelector(window.location.hash);
            if (target) {
                target.scrollIntoView();
            }
        }
    } else {
        console.warn('Could not load cards');
    };
};

---

定位是在AJAX请求完成之前进行的，因此书签还不在页面中。

xhr.onload = function() {
    if (this.status == 200) {
        cards.innerHTML = xhr.responseText;
        if (window.location.hash) {
            let target = document.querySelector(window.location.hash);
            if (target) {
                target.scrollIntoView();
            }
        }
    } else {
        console.warn('Could not load cards');
    };
};