How to load an html inside main index html on button click

后端未结

关注

 2  685

别那么骄傲

Use case:

I have designed a sidbar navigation using HTML and CSS\\Js as shown below. lets name this index.html

相关标签:

2条回答

慢半拍i

2021-01-15 20:07

You can try something like this:

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>

Then you will have a JS file which will handle the rest of the pages.

Content.js

//initialise the pages

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);
        });
    }

Then your pages will look live this:

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>

0 讨论(0)

慢半拍i

2021-01-15 20:15

You can use this on click a tag.

function load(file) {

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

If you use jquery change to $("#content").load("flex.html");

Update:

If you try to open html file in local, you need setup security for browser allow enable CORS. Disable same origin policy in Chrome

You should use a web server to open file. I host sample in free host. It worked

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 讨论(0)