使用 Ionic 框架将 html 文件的内容嵌入到另一个 html 页面？答案

【问题标题】：Embed content of a html file to another html page using the Ionic framework?使用 Ionic 框架将 html 文件的内容嵌入到另一个 html 页面？
【发布时间】：2014-10-18 22:37:42
【问题描述】：

我目前正在创建一个网站using the Ionic framework，其左侧有一个侧边栏。用户可以单击一个项目转到网站的另一个页面。现在我必须将侧边栏的代码复制到每个页面，这是无用的，不是要走的路。

所以我的问题是是否可以将 html 页面“嵌入”到另一个页面的特定部分。例如，我可以将侧边栏设置为“静态”并加载到特定 div 中的 login.html 文件中。拥有一个包含所有页面的 html 文件将非常难以维护和组织。

这可能以某种方式实现吗？

编辑：根据要求，我正在添加我已经拥有的最相关的代码

<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 -->

我想要达到的是，当有人点击“配置文件”选项时，主页的内容会切换为取自另一个 html 文件的内容

【问题讨论】：

您使用什么网站创建者/编辑器？
是的，这是可能的。您可以使用 iframe，甚至 JavaScript 或 PHP。但是你为实现这个目标编写了什么代码？您所描述的对于基本编码人员来说非常简单。也许您是新手，但这是一个编码站点；不是“为你工作”的网站。那你已经做了什么？
我正在使用 Webstorm 并从头开始编写 html。不得不说我用的是离子框架+angularJS（有关系吗？）
你应该把它放在每一页上。或者，如果您有一个持久性代码部分，则将其放在那里。
“flag”链接在标签下方，在“share”和“edit”旁边。

标签： html overlay swap ionic-framework

【解决方案1】：

您可以使用角度 UI 路由解决它：

   $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"
                }
            }
        })

这里的“菜单”是抽象状态，包含由路由器控制的嵌入式视图。

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

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

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

【讨论】：

【解决方案2】：

你可以通过使用框架来做到这一点:) 只有 html 下面的代码会有所帮助

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

你也可以像这样用php来做

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

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

【讨论】：

自 HTML5 以来不推荐使用框架集。我认为教新开发人员如何使用它们是不明智的。
你说得对，兄弟，但他要求一种仅使用 html 的方法，我认为即使它已被弃用，新开发人员知道所有做某事的方法也不错，我提供了另一种更强大的方法方式（php）

【解决方案3】：

您可以创建一个链接，这样当他们单击“配置文件”时，它会转到另一个页面，然后您可以将侧边栏的代码放入 php 文档中，并使用 php 包含标签在新页面中显示它。请看下面的例子：

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>

新页面：

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

【讨论】：

你没有理解问题，他想在另一个文件中添加一个 html 文件，而不是移动到另一个文件的链接
答案是正确的。 sidebarCode.php 被包含在新页面中。

【解决方案4】：

在<ion-side-menu-content> 中，您可以通过 ui 路由器加载脚本。因此，您可以做的是，当用户单击菜单项时，您使用 $templatecache 将页面 HTML 存储为模板，然后只需在 <ion-side-menu-content> 中重新加载您的视图即可完成您的工作！

【讨论】：