欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

html使用共同的头部导航

发布时间:2025/6/17 编程问答 46 豆豆
生活随笔 收集整理的这篇文章主要介绍了 html使用共同的头部导航 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

写公司官网时,发现导航和轮播每一个页面都有,首先想到的是用vue的路由来实现,后来考虑到seo的问题,需要用到nuxt,后来想了比较麻烦就没有用,然后想到了了iframe(但是iframe有阻塞页面的加载等缺点,没有使用)
下面还是说一下iframe自动适应高度的问题
子页面添加如下代码:

var oIframe = window.top.document.getElementById("mainiframe");var oBody = document.getElementsByTagName("body")[0];oIframe.style.height = oBody.offsetHeight + 'px';

如果主页面的iframe是动态的,主页面需要添加如下代码:

function loadPage(path) {document.getElementById("mainiframe").src = path}

最后还是使用了jq 的load
但是load在本地访问的时候会出现跨域问题,需要放在服务器上访问,不然报错如下:

load方法如下:

function loadPage(path) {$('.page').load(path)}

转载于:https://blog.51cto.com/12885303/2147338

总结

以上是生活随笔为你收集整理的html使用共同的头部导航的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。