HTML页面引入公共HTML部分

经过多番百度和亲自使用，找出了以下四种现行可用的方法；

各有优缺点，可选择适用方法使用；

将另一个HTML页面作为js文件引入

通过 HTML转JS 将HTML转换为JavaScript，然后在相应的位置引入。

<script type="text/javascript" src="user_left.html"></script>

JavaScript引入

<div id="user_left"></div>
<script type="text/javascript"> $(document).ready(function () { $('#user_left').load('user_left.html'); });
</script>

<iframe>标签

通过在<body>中编写<iframe>标签引入另一HTML文件这种方式也只适用静态页面，高度不会自动适应

<iframe src="user_left.html" height="100%" width="100%" scrolling="no" frameborder="0"></iframe>

可通过页面加载完成之后获取页面高度，然后替换iframe的高度实现高度自适应

function setIframeHeight(){ var height = document.documentElement.scrollHeight;         parent.document.getElementById('main').style.height = height + 'px';
}

<embed>标签

无法自适应宽高，需要提前设置好宽高

<embed type="text/html" src="user_left.html" style="width: 100%;height: 135px"/>

HTML页面引入公共HTML部分相关推荐

vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
普通页面引入公共页面之后bootstrap中下拉菜单js效果失效无反应的问题
说下最近写页面遇到的一个坑,公共页面里用bootstrap框架搭了一个导航条,带有下拉菜单的导航条,bootstrap的css样式和js代码,在公共页面里已经引过了. 普通页面只需要引入下公共页面, ...
html静态页面引入公共html页面
很多人问有什么方法不用模板引擎在普通静态html页面导入公共的html页面,比如header.html, footer.html, 在这里我是这样做的,自己写了一个include.js include ...
Thymeleaf中设置每个页面引入公共css样式
场景 Thymeleaf提取公共页面(从实例入手,以inspinia模板为例): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/9 ...
两个页面的公共的文件怎么只引入一次_vuecli 多页面之公共入口
前言网上vuecli多页面配置教程大多讲的是如何配置多页面,少有见到介绍多页面的优化方案.以下总结几点缺陷:1.如何公共引入?公共入口怎么设置?2.路由跳转和传参怎么方便?3.每个页面都要手动创建? ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
php页面引用公共文件,WeiPHP插件模板中快速引入公共模板文件
WeiPHP插件模板中快速引入公共模板文件,weiphp建立于onethink之上,简单修改代码,无需填写绝对路径实现轻松引入模板.记录一下,分享给需要的人. 修改文件: ThinkPHP/Libra ...
Angular多个页面引入同一个组件报错The Component ‘MyComponentComponent‘ is declared by more than one NgModule怎么办？
有一天,我写了一个自信满满的自定义组件myComponent,在多个页面import使用了,结果控制台给我来这个我特么裤子都脱了,你给我来这个提示是几个意思仔细一看 The Component ' ...
Thymeleaf引入公共片段方式
引入公共片段引入公共片段的th属性,包括三种方式 th:insert 将公共片段,整个插入到声明引入的元素中 th:replace 将声明引入的元素,替换为公共片段 th:include 将被引入的 ...

HTML页面引入公共HTML部分

将另一个HTML页面作为js文件引入

JavaScript引入

<iframe>标签

<embed>标签

HTML页面引入公共HTML部分相关推荐

最新文章

热门文章