h5页面对于导航及底部栏等公共部分的引用（iframe）

对于大多数网站来说，导航栏和底部的信息栏在多个页面中都是通用的。如果将这些代码放在每一个页面的html中，会显得代码冗余，而且修改起来也极为不方便。 
所以如果将这些代码放在单独的页面中，在其他页面直接引入的话，不仅代码量减少，而且在公共部分需要修改时，也只需要修改一处就可以了。

引入页面公共部分的步骤： 
1. 首先要将公共部分单独放在一个html页面中。这个页面必须是一个完整的页面，包含head,body等标签，引入的css,js等都需要在这个页面中引入。 
也就是说，这个页面单独打开的情况下， 也是一个可以正常显示的页面。例如： 

2. 在需要引入公共部分的页面，使用 iframe来引入公共部分 head.html

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

• 1

宽高根据自己的需要去修改。 
frameborder是隐藏框架周围的边框。scrolling属性规定是否在 iframe 中显示滚动条，这里不显示。 
这样完成以后，公共部分就被成功引入了页面中。

---

问题：

但是我又发现了一个问题，导航列表中的a标签点击无法跳转到href中的页面中。 
例如：我的品牌介绍是这样的：

<a href="pinpai/index.html"></a>

• 1

1.引入以后发现a标签点击不跳转，查资料用了下面的方法，就可以正常跳转了。 
给iframe加上name属性并赋值，然后a标签添加属性target，值等于iframe的name值:

<a href="pinpai/index.html" target="headFrame"></a>

• 1

这样的话a标签就可以跳转了。（但是此时的跳转只是iframe中区域变了（页面地址并没有改变），而非页面调到新的一页去）

，若想跳的新的一页去(即链接改变)，需要设置target="_parent"

2.我还希望导航栏能够实现，点击某个导航标题时，在页面跳转的同时，对应的标题能改变颜色以此突出于其他标题。例如：

本以为这样的效果很好实现，但是因为点击以后页面就跳转到了一个全新的页面，在全新的页面中，导航栏还是没有改变，试了很多方式，最后用sessionStorage的方式记录点击点，实现了这个效果。 
具体的代码实现是： 
　　1. 给每个a标签都添加不同的id，当点击a标签时，将点击的id通过sessionStorage存储到本地。 
　　2. 在页面加载的同时，从本地查询是否存在id，存在的话， 将这个id对应的a标签改变字体颜色。

  // 从本地存储中获取存储的id
  var aClick = sessionStorage.getItem('aClick');
  if(aClick){
    //改变id对应的a标签的字体颜色以及加粗
    $('#'+aClick).css('color','green');
    $('#'+aClick).css('font-weight','400');
  }

  //点击时存储id
  $('.left').find('a').on('click',function(){
    sessionStorage.setItem('aClick',$(this).attr('id'));
  })

• 
  

当然，上面的代码直接写在公共文件head.html中就可以了。

转载自： https://blog.csdn.net/ZaynahLy/article/details/76901281