Как подключить (аналог php include) html файл в js?

Question

[Jesse Pinkman]

Добрый день!
Есть 2 страницы
-> index.html
-> hello.html

В index.html мне нужно с помощью js после секции .top-section вставить содержимое hello.html. Это можно сделать на php за 20 секунд, но у меня ситуация несколько не стандартная и по этому приходится делать так:

Создать php файл допустим my.php
с помощью js делать ajax запрос

js

$.ajax({
                url: 'my.php',
                type: 'POST',
                dataType: 'json',
                success: (data) => {
                          $('.top-section').after().append(data.html);
                }
            });

my.php

ob_start();
        include 'hello.html';
        $view = ob_get_clean();
        ob_end_flush();

        echo json_encode([
            'html' => $view
        ]);

Но такой способ мне кажется ужасным.. неужели нет другого способа, например через js напрямую получить hello.html ?
Так же iframe работает, но мне не подходит из-за модалок.

Помогите пожалуйста

Comments

[Вадим]

iframe?
fetch на /hello.html ?

[Jesse Pinkman]

Вадим, да, забыл в вопросе указать, что iframe работает, но мне не подходит из-за модалок. Но спасибо вам, что пытаетесь мне помочь!

Answer 1

[Rsa97]

const sectionHtml = await fetch('hello.html');
document.querySelector('.top-section').innerHTML += await sectionHtml.text();

Answer 2

[Stalker_RED]

Jesse Pinkman, если вы хотите сделать это из браузера, то в любом случае браузеру нужно сделать запрос, через xhr или fetch. И нет, встроенной такой опции нет, разве что iframe.
Что "ужасного" в вашем способе?

Можете вынести запрос в отдельную функцию, и вызывать в нужном месте, типа
insertHtml('#target_block', '/hello.html')
передавая только селектор блока или блок, в который нужно вставить, и url фрагмента.

Есть и готовые скрипты такого рода, тот-же includeHTML от xmoonlight

Comments

[Adamos]

Что "ужасного" в вашем способе?

Например, совершенно ненужный перегон HTML в JSON и обратно.

[Stalker_RED]

Adamos, да, json не нужен, как и php файли, можно ведь просто запросить статический html

Answer 3

[Надим]

Если на сайте подключен jQuery, то просто используйте метод load, чтобы вставить HTML файл внутрь нужного вам блока:
https://basicweb.ru/jquery/jquery_method_load.php

Пример:
$('.top-section').load('hello.html');

Comments

[Надим]

Jesse Pinkman, как правило jQuery есть в большинстве движков.