包含书签的 innerHTML 不能从另一个页面链接到

Question

我使用 JavaScript AJAX 将文件 cards.html 包含到父 html 页面 index.html。
包含的 cards.html 文件是卡片列表，每张卡片中都有一个书签，格式为 <li id="byx-123_shapes">。当我从另一个页面超链接到书签时，浏览器不是定位在书签上，而是定位在页面顶部。如果我手动将 cards.html 插入 index.html 超链接工作正常。浏览器似乎不知道这些书签，因为它们是通过 AJAX 导入的，而不是在加载 index.html 时存在的。

Cards.html 包含在 index.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>
...

JavaScript加载cards.html

// Uses AJAX to load cards.html
// Works but messes up card bookmarks
const xhr = new XMLHttpRequest();
const cards = document.getElementById('cards');
xhr.onload = function() {
    if (this.status == 200) {
        cards.innerHTML = xhr.responseText;
    } else {
        console.warn('Could not load cards');
    };
};
xhr.open('get', 'cards.html');
xhr.send();

超链接示例在通过 AJAX 包含时无效，但在手动插入卡片时有效。

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

有人可以解释为什么会发生这种情况以及如何解决它。

Answer 1

当您加载 index.html#bookmark 时，它会尝试在加载页面后立即滚动到书签。但是 AJAX 请求尚未完成，因此书签未加载。

您应该在 xhr.onload 函数中放入代码，以便在插入 HTML

后滚动到书签

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');
    };
};

包含书签的 innerHTML 不能从另一个页面链接到

innerHTML containing bookmarks cannot be linked to from another page

html

javascript

ajax

innerhtml