Включение страницы Html в главную html страницу - страница Javascript не работает - PullRequest
0 голосов
/ 09 мая 2020

В моем проекте это простой проект HTML / Javascript. Я включаю страницы в индексную страницу для облегчения чтения. Это страница с вкладками. Таким образом, каждая вкладка имеет включенную страницу html.

JavaScript:

<script>
    $(function () {
        $("#Startup").load("Startup.html");
        $("#Continuous").load("Continuous.html");
    });
</script>

Вкладки выглядят так:

<div id="tab1" class="tab-pane active" style="max-width:100%;">
    <div id="Startup"></div>
</div>
<div id="tab2" class="container tab-pane fade" style="max-width:100%;">
    <div id="Continuous"></div>
</div>

Проблема, в которой я Имеется JavaScript файлов, которые включены в страницу индекса. Элементы управления, как я их называю, на включенной странице не работают. Как будто он даже не видит загруженного JavaScript.

Я еще не пробовал IFrames, однако в будущем я хотел бы иметь возможность поднять это на IPad, и я не думаю, что совместим или, по крайней мере, не был в прошлом.

Все сценарии включены, а сценарии находятся в конце страницы. Я пробовал переместить их в раздел «Голова», но это не имеет значения.

На моих отдельных страницах для страницы требуется только html, поэтому нет тегов Html, Head и body.

Есть ли что-то, чего мне не хватает на этих страницах, или просто включение html в другую не разделяет ресурсы? И если да, то есть ли способ сделать это по-другому?

Также стоит сказать, что это должно быть строго HTML, и скрипты на стороне сервера будут недоступны.

Спасибо за помощь!

ОБНОВЛЕНИЕ:

Мне интересно, это просто проблема, которая загружается первой.

Я попытался загрузить JQuery, затем мой сценарий выше в заголовке и оставил другие скрипты внизу страницы, но он по-прежнему не работает.

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Функция загрузки jQuery загружает только данные с сервера (для доступа к этой странице потребуется URL-адрес). Load не обслуживает ваш локальный файл HTML. Как вы сказали, сценариев на стороне сервера нет, загрузка здесь работать не будет.

0 голосов
/ 09 мая 2020

Попробуйте добавить jquery на свою страницу. Примерно так должно работать. Убедитесь, что файлы обслуживаются с веб-сервера. Вы не можете просто открыть файл index. html локально в своем браузере.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("#Startup").load("Startup.html");
        $("#Continuous").load("Continuous.html");

});
</script>
</head>

<body>
<div id="tab1" class="tab-pane active" style="max-width:100%;">
    <div id="Startup"></div>
</div>
<div id="tab2" class="container tab-pane fade" style="max-width:100%;">
    <div id="Continuous"></div>
</div>
</body>
</html>

Вы получите ошибки CORS, если попытаетесь выполнить AJAX вызовы из локального файла. Они отображаются в консоли инструментов разработчика и выглядят следующим образом:

Access to XMLHttpRequest at 'file:///Users/peterg/tmp/Startup.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, https.

Вы можете использовать .load (), чтобы добавить html или текст на существующую страницу. Это не лучший способ включать javascript. См. https://api.jquery.com/load/

«При вызове .load () с использованием URL-адреса без суффиксированного выражения селектора содержимое передается в. html () до удаления скриптов. Это выполняет блоки сценария до того, как они будут отброшены. "

Это делается для уменьшения возможности межсайтового скриптинга (XSS) .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...