码迷,mamicode.com
首页 > Web开发 > 详细

html使用共同的头部导航

时间:2018-07-19 18:15:04      阅读:595      评论:0      收藏:0      [点我收藏+]

标签:路由   set   没有   body   color   style   off   51cto   seo   

写公司官网时,发现导航和轮播每一个页面都有,首先想到的是用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)
    }

html使用共同的头部导航

标签:路由   set   没有   body   color   style   off   51cto   seo   

原文地址:http://blog.51cto.com/12885303/2147338

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!