Как загрузить HTML внутри основного индекса HTML по нажатию кнопки - PullRequest
Новая
       16

Как загрузить HTML внутри основного индекса HTML по нажатию кнопки

0 голосов
/ 26 апреля 2019

Вариант использования :

Я разработал навигацию по sidbar, используя HTML и CSS \ Js, как показано ниже. давайте назовем это index.html

SidebarNavigator

У меня есть другой HTML, например Dashboard.html , макет которого выглядит ниже enter image description here

Теперь, если я нажму «Выполнение в реальном времени» в index.html , панель мониторинга. HTML должна отображать содержимое внутри основного index.HTML без Нарушение боковой панели навигации и заголовков

Я новичок в кодировании пользовательского интерфейса, поэтому меня смущают все доступные опции. Как я могу достичь вышеуказанного результата !!

Обновленный код - с Jquery

Мне удалось решить эту проблему с помощью @Hien Nguyen

Мне нужно поместить класс div до того, как функция load () вступит в действие, а затем сослаться на этот класс div для вызова load ()

index.html 

<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
            <li>

</script>
{% block second %}
<div id="content1" class="col-xs1 centre-block text-center" style="width:100%">
</div>
        <script type="text/javascript">

            function load_jumbo() {

//     document.getElementById("content").innerHTML='<object type="text/html" data="dashboard.html" ></object>';
            $("#content1").load("jumbotron.html");

}
</script>
{% endblock %}

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Вы можете использовать это при нажатии на тег. 

function load(file) {

     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}

Если вы используете jquery, измените на $("#content").load("flex.html");

Обновление:

Если вы попытаетесь открыть HTMLфайл в локальном, вам нужно настроить безопасность браузера, разрешить включение CORS. Отключить ту же политику происхождения в Chrome

Для открытия файла необходимо использовать веб-сервер.Я размещаю образец на бесплатном хосте.Работало

https://viethien.000webhostapp.com

function load(file) {
     
     document.getElementById("content").innerHTML='<object type="text/html" data="flex.html" ></object>';
}
<li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" area-expandable="false" class="dropdown-toggle">Dashboard
                    <i class="far fa-chart-bar"></i>
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#" onclick="load()">Live Execution
                            <i class="fas fa-chart-line"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Error Analysis
                            <i class="fas fa-bug"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#">Rerun failed Tc
                            <i class="fas fa-step-forward"></i>
                        </a>
                    </li>
                </ul>
            </li>
<li>

<div id="content" style="width:100%"></div>
0 голосов
/ 26 апреля 2019

Вы можете попробовать что-то вроде этого:

Index.html 

<html> 
<head>......</head>
<script>
   function loadView(_view, _el) {
      //check if already selected view
      if ($(_el).hasClass("menuItemSelected")) {
          return;
       }

         //set selected
         $(".menuItemSelectable").removeClass("menuItemSelected");
         $(_el).addClass("menuItemSelected");

         loadSinglePage(_view);
        }
</script>
<body>
    .......
    //your sidebar here
   <a href="#dashboard" class="menuItemSelectable menuItemSelected" onclick="loadView('dashboard', this);"><i class="fa fa-dashboard" aria-hidden="true"></i><span class="nav-label">dashboard</span></a>
   <a href="#liveexec" class="menuItemSelectable" onclick="loadView('liveexec', this);"><i class="fa fa-globe" aria-hidden="true"></i> <span class="nav-label">Live Execution></span></a>

</body>

</html>

Тогда у вас будет файл JS, который будет обрабатывать остальные страницы.

Content.js

// инициализировать страницы 

var execContent = undefined;
var scheduleContent = undefined;

function loadPages() {

    // initialize your panels here
    $("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {

        //progress
        $("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
            loadProgress.init($("#divProgressLoader"));
        });

        searchPage.init($("#divSearchPanel"));

        //dashboard
        loadSinglePage("dashboard");
    });
   //call the loadpage function
   loadPage("dashboard");

}

//load the page


   function loadSinglePage(pageId) {

    currentPage = pageId;
    var contentDiv = $("#divPageContent");
    contentDiv.html("");

    if (pageId == "dashboard") {
        contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
            dashboardContent.init(contentDiv);
        });
    }

    if (pageId == "liveexec") {
        contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
            execContent .init(contentDiv);
        });
    }

Тогда ваши страницы будут выглядеть так:

liveexec.html 

<div style="">
    <table style="width: 100%; height: 100%;" cellpadding="10" cellspacing="10">
        <tr>
            <td id="divgraph"></td>

        </tr>
        <tr>
            <td id="divbuttons"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var execContent = execContent || {};

    (function (pub) {
        var _dom = null;

        pub.init = function (dom) {
            _dom = dom;
            //load graphs
            _dom.find("#divgraph").load("graph.html", function (response, status, xhr) {
                riskComparisonGraph.init(_dom.find("#divgraph"));
            });

        }

    })(liveexecContent || {});

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

Нет похожих вопросов

...