Когда я использую createElement и устанавливаю его текст, я не вижу его в `View Source`

Question

private addStructuredData(el: ElementRef, schema: JsonLdSchemas) {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'type', 'application/ld+json');
    script.text = JSON.stringify(schema);
    this.renderer.appendChild(el.nativeElement, script);
}

У меня есть код выше как функция Angular. Идея состоит в том, чтобы создать элемент сценария, а затем добавить его в качестве дочернего элемента к тому элементу, который передается в функцию.

Эта функция работает хорошо, если вы хотите видеть результат только через Inspect Element. Схема выглядит идеально там.

Хотя, когда я пытаюсь просмотреть ее через View Source, схема не появляется. Любые идеи? Спасибо

Answer 1

Это ожидается. При просмотре источника страницы вы будете просматривать необработанный несжатый ответ, отправленный вам сервером. Он будет не содержать какие-либо изменения, которые могли быть внесены сценариями в DOM.

Изменения будут доступны для просмотра путем проверки элемента в инструментах разработчика или с помощью проверка innerHTML / outerHTML элемента или одного из его предков.

В вашем случае либо исходный код, либо один из необходимых ему сценариев будет иметь текст сценария, который добавляет новый сценарий, в Javascript, например, что-то вроде

addStructuredData(el, schema) {
    const script = this.renderer.createElement('script');
    this.renderer.setAttribute(script, 'type', 'application/ld+json');
    script.text = JSON.stringify(schema);
    this.renderer.appendChild(el.nativeElement, script);
}

(или, возможно, преобразованное в ES5, а не ES6)

Но сценарий, который добавлен выше, будет не видимым глядя на view-source вашей страницы.