Html公共页面的引用

最新推荐文章于 2025-05-06 18:11:40 发布

ClearLoveQ

最新推荐文章于 2025-05-06 18:11:40 发布

阅读量4.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： Html公共页面的引用 iframe标签 iframe的z-index

本文链接：https://blog.youkuaiyun.com/ClearLoveQ/article/details/90322476

HTML 专栏收录该内容

9 篇文章

订阅专栏

博客介绍了HTML公共页面引用方法，需将公共部分放于完整HTML页面，引用文件用绝对路径。使用iframe标签引用公共页面，还提及引入后可能影响原布局，如造成空白，解决办法是用div套住iframe，同时指出iframe设为绝对定位时z-index才生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先要将公共部分单独放在一个html页面中。这个页面必须是一个完整的页面，包含head,body等标签，引入的css,js等都需要在这个页面中引入。
也就是说，这个页面单独打开的情况下，也是一个可以正常显示的页面。注意，在这个页面中其他文件引用位置最好使用绝对路径，要不然到你引入公共页面的页面有可能会找不到文件

如下两张图，单独的页面并且此页面可以单独访问：

2.使用ifram标签引用公共页面；

<iframe src="./commonhtm/head.html" width="100%"; height="700px" frameborder="0" scrolling="no" name="headFrame"></iframe>

3.有可能出现的问题：

当你引入此文件后，会影响原来的布局：比如我的这种情况，顶部的菜单包含了下拉的菜单，这个菜单是在鼠标移动上去触发的，这时iframe如何设置了700px的高度，这样会影响下面的div，会造成一大段的空白，该如何解决此问题呢？解决办法是：在用一个div将iframe套起来，这样就不会有问题了，像下面这样：

<div id="root_first" style="display: block;height: 268px;z-index:9999;">
				<iframe src="./commonhtm/head.html" width="100%"; height="700px" frameborder="0" scrolling="no" name="headFrame"
					style="position: absolute;z-index:9999;"></iframe>
			</div>

同时注意：iframe需要设置为position: absolute;时，他的z-index:9999才会生效，不然总是被主页面挡住，最终的效果如下图：