html中引入公共的html页面几种方法

最新推荐文章于 2024-02-27 10:10:56 发布

waillyer

最新推荐文章于 2024-02-27 10:10:56 发布

阅读量6k

点赞数 2

分类专栏：基础（html css javascript）

本文链接：https://blog.csdn.net/waillyer/article/details/106587002

版权

javascript）同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

基础（html

5 篇文章 0 订阅

订阅专栏

一、使用jQuery的load函数

<body>
    <div id="header1"></div>
    <script>
          $("#header1").load("page/header1.html");
    </script>
</body>

注意:header1中不需要把整个代码写全，以为一个html中只能存在一个body标签，去掉所有的标签

二、include标签

`{include file=“page/header1.html”}

三、iframe标签（无法异步加载外部js）


<iframe src="page/header1.html" width="100%" height="50" frameborder="0"></iframe>

四、object标签（无法异步加载外部js）


<object data="page/header1.html" width="100%" height="50" ></object>

五、link标签


    <link rel="import" href="page/header1.html">

六、异步请求

$.get('page/header1.htm',function(html){  });

七、vue 的 v-html 属性配合ajax异步请求

var app = new Vue({
        el: '#body',
        data: {
            message: ['Hello Vue!','123','456'],
            head: ""
        }
    });
    $.get('page/header1.htm',function(html){  
        app.head = html;
    });

八、第三方插件 AngularJS

引入 js 依赖

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

body中引入

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

waillyer

关注

2
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
html中引入公共的html页面几种方法

一、使用jQuery的load函数<body> <div id="header1"></div> <script> $("#header1").load("page/header1.html"); </script></body>注意:header1中不需要把整个代码写全，以为一个html中只能存在一个body标签，去掉所有的标签二、include标签`{include
复制链接

扫一扫

专栏目录