在html页面引入外部html的方法 (使用第三方插件)

最新推荐文章于 2024-07-03 21:53:40 发布

java叶新东老师

最新推荐文章于 2024-07-03 21:53:40 发布

阅读量1.5w

点赞数 9

分类专栏： html 文章标签：引入外部html

本文链接：https://blog.csdn.net/qq_27184497/article/details/83995695

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一般情况下，引入外部html的方法无非就5种，分别是：

   1、iframe
    <iframe src="test.html"></iframe>  

   2、link方式
    <link rel="import" href="test.html"> 

   3、异步请求
    $.get('test.html',function(html){  });   

   4、js方式
    $("body").load("index.html"); 

   5、vue 的 v-html 属性配合ajax异步请求
    #html部分：
    <div v-html="head"></div>
    
    #js部分
    var app = new Vue({
        el: '#body',
        data: {
            message: ['Hello Vue!','123','456'],
            head: ""
        }
    });
    $.get('test.html',function(html){  
        app.head = html;
    });

但现在，我发现了一种更方便的方式，就是使用第三方插件 AngularJS 来实现

首先引入 js 依赖

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

然后body样写就ok啦

<body id="app" ng-app="">
    <!-- 注意，一定要双引号在包含单引号 -->
    <div ng-include="'head.html'"></div>
</body>

最后我们写个案例来测试下，新建head.html 文件

<div>
    这是头部
</div>

然后新建index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body id="app" ng-app="">
    <div>主html内容</div>
    <div ng-include="'./head.html'"></div>
</body>
</html>

浏览器访问index.html页面，内容如下图