Загрузка HTML-страницы в контейнер с помощью java со страницы внутри контейнера

Я новичок в кодировании, и это мой первый раз здесь, так что полегче :)

также, пожалуйста, не стесняйтесь сказать мне, что это глупый способ достижения желаемого эффекта.

Я разрабатываю страницу внутренней сети компании и начал загружать страницы в контейнер на странице index.php. который отлично работает!

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

Пример:

index.html

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    $("#content").load("HR.html");
});
    $("#load_FAQ").on("click", function() {
    $("#content").load("FAQ.php");
});
    $("#load_Info").on("click", function() {
    $("#content").load("info.html");
});
    $("#load_directory").on("click", function() {
    $("#content").load("directory.php");
});
});

<div id="content"></div>

Вот как мои кнопки Navbar загружают страницы в контейнер, это работает нормально.

Теперь я хочу загрузить страницу, скажем, страницу HR.html в контейнер, который в настоящее время занят страницей HR.html.

выглядит просто, звучит сложно, и я хожу кругами.

Пожалуйста помоги! :)


java html single-page-application
person Liam Mead    schedule 19.04.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Похоже, что функции JQuery .load() пытаются выполнить XMLHttpRequest, что приводит к следующей ошибке

cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Попробуйте использовать обычный JS, у меня сработало.

$( document ).ready(function() { $("#load_HR").on("click", function() { document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>'; });

Итак, ваш код должен выглядеть примерно так

       <ul class="nav navbar-nav">
            <li><a href="#" id="load_HR"> HR</a>
            </li>
            <li><a href="#" id="load_FAQ"> FAQ</a>
            </li>
            <li><a href="#" id="load_info"> Info</a>
            </li>
            <li><a href="#" id="load_directory"> Directory</a>
            </li>
        </ul>

$( document ).ready(function() {
    $("#load_HR").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="HR.html" ></object>';
});
    $("#load_FAQ").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="FAQ.php" ></object>';
});
    $("#load_Info").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="info.html" ></object>';
});
    $("#load_directory").on("click", function() {
    document.getElementById("content").innerHTML='<object type="text/html" data="directory.php" ></object>';
});
});

<div id="content"></div>
person DevKimo    schedule 19.04.2017
comment
Спасибо за вашу помощь DevKimo! В конце концов я понял, что могу обойти свою проблему, добавив функцию на страницу, загружаемую в контейнер. - person Liam Mead; 21.04.2017

arrow_upward
0
arrow_downward

Я нашел свой ответ jQuery:

добавив эту функцию на страницу, загруженную в контейнер контента, например, когда я загрузил страницу HR.html:

function loadbenefits() {
    $('#hrContent').load('CompanyBenefits.html');
}

затем создайте кнопку, которая загрузит новую страницу в контейнер с помощью onClick(="loadbenefits()" следующим образом:

<button onClick="loadbenefits()" class="btn" type="button" value="Go"> Some Text </button>
person Liam Mead    schedule 21.04.2017