引用html公共部分的方法

html引入公共部分(header、footer等)

引入公共部分的好处:把公共部分提取出来,修改代码不需要每个html都去修改,只需要修改一份。

 1. 使用iframe标签

缺点:无法异步加载外部js

举例:如导入header导航栏

初步使用iframe导入发现的问题:

1. 会显示有高度为0的body       

        原因:公共部分的html包含了头部标签元素

                   一个页面不能有多个head、body等

        解决方法:公共部分的html只写body里面的内容

2. 导航栏二级菜单显示不出来 

        原因:iframe部分高度固定       

       解决方法:设置高度足够高,但由于过高会挤压遮盖下面内容,第二步:设置为绝对定位position:absolute; z-index:999;

3. 有边框和滚动条

        原因:将 iframe的属性frameborder="0" scrolling="no" 设置为no

iframe的属性有:

属性 描述
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。

frameborder
  • 1
  • 0
规定是否显示框架周围的边框。
height
  • pixels
  • %
规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
启用一系列对

尾部同理


完成! ps:当时完成项目时发现导入的js不出效果,但是现在效果出来了,不知道是什么原因。。

 

2. 使用jquery提供的load方法

   
 

你可能感兴趣的:(html,html,前端,css)