Загрузка html документа с заголовком и скриптами в элемент - PullRequest
Новая
       22

Загрузка html документа с заголовком и скриптами в элемент

1 голос
/ 10 июля 2020

Я использую пользовательские веб-компоненты с shadow dom для загрузки файла html в элемент, я не могу найти способ загрузить его как файл html без задержки сценариев заголовков и ссылки стиля.

Другими словами, скрипты не загружаются, а внешние css файлы в теге заголовка задерживаются до тех пор, пока html не будет полностью загружен.

файл html выглядит так: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">

<head>
    <title>My Document</title>
    <link href="/MyStyles.css" rel="stylesheet" type="text/css" />
    <script src="/MyScripts.js" type="text/javascript"></script>
</head>

<body>
    <!-- Other Main Tags -->

    <script src="/AnotherScript.js" type="text/javascript"></script>
</body>

</html>

Javascript: 


customElements.define('ui-include', class extends HTMLElement {

    async connectedCallback() {
        let ref = this.getAttribute('ref')

        const shadow = this.attachShadow({ mode: 'open' })
        shadow.innerHTML = 'Loading...';

        fetch(`/documentviewer.aspx/GetContent`,
            {
                body: JSON.stringify({ reference: ref }),
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
            })
            .then(r => r.json())
            .then(r => {
                // r.d is the response html string (html file example above)
                shadow.innerHTML = r.d ;
            })
            .catch(e => {
                console.error(e)
            })
            .then(() => {
                console.log('done')
            })
    }
})

HTML: 

<ui-include ref="Document_123"></ui-include>

После загрузки страницы при проверке ui-include. тег заголовка больше не отображается. вроде бы его развернули, вот скриншот:

введите описание изображения здесь

Обратите внимание, что выбранный сценарий на изображении - /MyScripts.js, а не /MyScripts

Как я могу рассматривать строку ответа html как фактический документ и загрузить его в веб-компонент?

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Вы можете воспользоваться помощью DOM Parser следующим образом: 

customElements.define('ui-include', class extends HTMLElement {
    async connectedCallback() {
        let ref = this.getAttribute('ref')
        const shadow = this.attachShadow({ mode: 'open' })
        shadow.innerHTML = 'Loading...';
        fetch(`/documentviewer.aspx/GetContent`, {
                body: JSON.stringify({ reference: ref }),
                method: "post",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
            })
            .then(r => r.json())
            .then(r => {
                shadow.children[0].remove();
                const dp = new DOMParser();
                const f = document.createDocumentFragment();
                const pDom = dp.parseFromString(r.d, 'text/html');
                f.appendChild(pDom.documentElement)
                shadow.appendChild(f);
            })
            .catch(e => console.error(e))
            .then(() => console.log('done'));
    }
})
0 голосов
/ 13 июля 2020

Как я могу рассматривать строку ответа html как фактический документ и загружать ее в веб-компонент?

Если вы хотите преобразовать строку в документ, вы должны использовать createHTMDocument . Но содержимое веб-компонента - это не документ, а только DocumentFragment .

По этой причине у вас не может быть элементов или в настраиваемом элементе или в теневой модели DOM.

Способ загрузки строки с помощью innerHTML действителен в той же степени, что и использование appendChild() с элементом или DocumentFragment.

...