Embed content of a html file to another html page using the Ionic framework?

问题

I”m currently creating a website using the Ionic framework that has a sidebar on the left side. Users can click on an item to go to another page of the website. Now I have to copy the code of the sidebar to every page and that's useless and not the way to go.

So my question is if it is possible to "embed" a html page in a specific section of another page. For example I could have my sidebar be "static" and load in a login.html file in a specific div. And having one html file with all the pages would be very hard to maintain and organise.

Is that possible in some kind of way?

EDIT: As requesting, I'm adding the most relevant code I already have

<ion-side-menus>

<!-- Main page-->
<ion-side-menu-content>
    <ion-header-bar class="bar-dark">

        <!-- Knop toggleSidebar -->
        <button class="button button-icon" ng-click="triggerSidebar()">
            <i class="icon ion-navicon"></i>
        </button>

        <h1 class="title">Proof of concept</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row">
            <div class="col" col-50>5 + 8 = </div>
            <div class="col" col-25><input type="number" placeholder="13"></div>
            <div class="col" col-25><button class="button button-small">Controleer</button></div>
        </div>
    </ion-content>
</ion-side-menu-content>

<!-- End Main page -->


<!-- Sidebar -->

<ion-side-menu side="left">
    <ion-header-bar class="bar-dark">
        <h1 class="title">Sidebar</h1>
    </ion-header-bar>
    <ion-content>
            <div class="item item-divider">Settings</div>
            <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
            <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
            <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
        </div>
    </ion-content>
</ion-side-menu>

<!-- End sidebar -->

What I'm trying to reach is, when someone clicks on the "profiles" option, the content of the main page gets switched with content taken from another html file

回答1:

You can solve it using angular UI-routing:

   $stateProvider
        .state("menu", {
            url: "/menu",
            abstract: true,
            templateUrl: "views/menu.html"
        })
        .state('menu.combinedPage1', {
            url: '/combinedPage1',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded1.html",
                    controller: "EmbeddedController1"
                }
            }
        })
        .state('menu.combinedPage2', {
            url: '/combinedPage2',
            views: {
                "EmbeddedContent": {
                    templateUrl: "views/embedded2.html",
                    controller: "EmbeddedController2"
                }
            }
        })

Here "menu" is abstract state and contains embedded views that controlled by router.

<ion-side-menus>
    <ion-side-menu-content>

        <ion-nav-view name="EmbeddedContent"></ion-nav-view>

    </ion-side-menu-content>
</ion-side-menus>

回答2:

You can do it by using frames :) with only html the following code will help

<html>
  <head>
    <title>Multiple Pages</title>
  </head>
  <FRAMESET cols="20%, 80%">
        <FRAME SRC="sidebar.html">
        <FRAME SRC="content.html">
        
  </FRAMESET>
</html>

also you can do it with php like this

#side_bar{
  background-color: red;
  width: 200px;
  height: 100%;
  float: left;
  }

<div id="side_bar">
  <?php
include_once('sidebar.html');
?>
</div>

回答3:

You can make a link so when they click on the "profiles" it goes to another page and then you can put the code for your sidebar in a php document and use a php include tag to show it in the new page. See the example below:

sidebarCode.php:

<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
    <h1 class="title">Sidebar</h1>
</ion-header-bar>
<ion-content>
        <div class="item item-divider">Settings</div>
        <a class="item" href="profiles.html"><i class="icon ion-person"></i> Profiles<span class="item-note">Freddy</span></a>
        <a class="item" href="#"><i class="icon ion-information-circled"></i> About</a>
        <a class="item" href="#"><i class="icon ion-android-mail"></i> Contact</a>
    </div>
</ion-content>

The new page:

<!--Specific Did You Want-->
<div>
   <?php include 'sidebarCode.php';?>
</div>

回答4:

Inside <ion-side-menu-content> you can load scripts via the ui router. So what you can do is when a user clicks on a menu item, you store the page HTML as template using $templatecache and then just reload your view inside <ion-side-menu-content> that will do your job !

来源：https://stackoverflow.com/questions/26445262/embed-content-of-a-html-file-to-another-html-page-using-the-ionic-framework

标签

html

overlay

swap

ionic-framework