js实现iframe框架的面包屑功能

什么是iframe框架

iFrame全称Inline Frame是HTML中的一个标签，用于在一个HTML文档中嵌入另一个HTML文档。iFrame框架可以将一个HTML文档嵌入到另一个HTML文档中的一个独立的窗口中，这个窗口可以独立于主窗口进行加载和渲染。

iFrame框架可以用于以下场景：

1. 在一个页面中嵌入另一个页面，例如在一篇文章中嵌入一段视频。
2. 在一个页面中嵌入一个广告，可以独立加载和渲染，不影响主页面的性能。
3. 在一个页面中嵌入一个登录框，可以通过iFrame框架实现跨域登录。

iFrame框架可以通过设置iFrame标签的属性来实现不同的效果，例如设置iFrame的宽度和高度、设置iFrame的边框、设置iFrame的src属性来指定要嵌入的HTML文档等。但是需要注意的是，由于iFrame框架可以跨域加载其他网站的内容，所以在使用iFrame框架时需要注意安全问题。

另外iframe解决了一个问题。
你比如说：一个项目你要写30个页面，需要来回跳转，而且每个页面的菜单栏都是一样的。简单来说就是30个页面有公共的html代码，css代码，js代码。你可以选择每个页面都复制粘贴一份，但是这样不会太过麻烦吗？
iframe就可以解决这个问题。这种情况情况下，30个页面公共部分的布局样式只需要写一遍即可，把这个作为iframe的框架。30个页面中不同的部分分别写不同的html文件，css样式，js代码。引入到这个框架中，就可以实现我们的预期目标。

如果有相同js，css，只需要放入一个公共的public.css / public.js,将公共文件路径引入html文件即可，但是公共的html应该怎么办呢？
这个时候iframe就显得很珍贵了，因为它实现了代码的重用。
想成为一个高手，就要具备重用代码的能力。用同一个函数能办类似的事情，用同样的代码能最大程度的做更多的事，这就算是高手。

---

什么是面包屑

面包屑（Breadcrumbs）是网站或应用程序中的一种导航方式，通过显示用户当前所处页面的路径来帮助用户快速定位到自己所需的内容或页面。

通常面包屑以一种层级结构的形式展现，每一层级代表一个页面或分类，用户可以通过点击面包屑上的链接回到之前的页面或分类。
你比如说，一个面包屑可能是这样的：
首页 > 电视 > 智能电视 > 55英寸智能电视，这表示用户当前正在查看的是55英寸智能电视的页面，并告诉用户如何回到电视或首页。

面包屑的作用在于：

1. 提供导航：面包屑可以告诉用户当前所处位置以及如何返回到之前的页面或分类，方便用户进行导航。
2. 提高用户体验：面包屑可以让用户更快速地找到自己需要的内容，提高用户的访问体验。
3. 提高网站可用性：面包屑可以让用户更好地理解网站的结构和组织，提高网站的可用性和易用性。

需要注意的是，面包屑应该尽可能简洁明了，不应该包含太多的层级，以免影响用户体验。同时，面包屑应该与网站的其他导航方式相结合，提供更全面的导航。

太常见了，举几个例子：

---

面包屑的js实现

思路

在 iframe 框架中，实现面包屑导航通常是由父窗口来维护和显示的。
我们主要以以下思路为主开发：

1. 在父窗口中，定义一个数组来存储当前页面的路径信息，例如：var breadcrumb = ['首页', '分类', '电视'];
2. 在父窗口中，为 iframe 的 onload 事件添加一个监听函数，用于在 iframe加载完成后更新面包屑导航。例如：iframe.onload = updateBreadcrumb;
3. 在 updateBreadcrumb 函数中，获取 iframe 中当前页面的路径信息，例如：var path = iframe.contentWindow.location.pathname;
4. 将当前页面的路径信息添加到面包屑导航数组中，例如：breadcrumb.push(path);
5. 更新面包屑导航的显示内容。可以通过 jQuery 来操作 DOM 元素，将面包屑导航数组中的内容渲染到页面中。
6. 当用户点击面包屑导航中的某个链接时，可以通过 JavaScript 来控制 iframe 的 src 属性，使其加载对应的页面。
7. 在每个页面中，可以通过 JavaScript 向父窗口发送消息，告知父窗口当前页面的路径信息，以便更新面包屑导航。

总体来说，iframe 框架的面包屑导航流程与普通页面的面包屑导航类似，只是需要在父窗口中来维护和显示面包屑导航，而在子窗口中则需要向父窗口发送消息来更新面包屑导航。

---

代码实现

html

<div id="breadcrumb"></div>
<iframe id="myFrame" src="index.html"></iframe>

js

var breadcrumb = ['首页']; // 初始化面包屑导航数组
var breadcrumbEl = document.getElementById('breadcrumb'); // 获取面包屑导航的 DOM 元素
var myFrame = document.getElementById('myFrame'); // 获取 iframe 的 DOM 元素
// 监听 iframe 的 onload 事件，更新面包屑导航
myFrame.onload = function() {
    
    
  var path = myFrame.contentWindow.location.pathname; // 获取 iframe 中当前页面的路径信息
  breadcrumb.push(path); // 将当前页面的路径信息添加到面包屑导航数组中
  renderBreadcrumb(); // 更新面包屑导航的显示内容
};
// 渲染面包屑导航的显示内容
function renderBreadcrumb() {
    
    
  var html = '';
  for (var i = 0; i < breadcrumb.length; i++) {
    
    
    if (i === breadcrumb.length - 1) {
    
    
      html += '<span>' + breadcrumb[i] + '</span>'; // 最后一个元素不加链接
    } else {
    
    
      html += '<a href="#" οnclick="goToPage(' + i + ')">' + breadcrumb[i] + '</a> <span>/</span> ';
    }
  }
  breadcrumbEl.innerHTML = html;
}
// 点击面包屑导航中的链接时，切换到对应的页面
function goToPage(index) {
    
    
  breadcrumb = breadcrumb.slice(0, index + 1); // 截取面包屑导航数组，保留前 index + 1 个元素
  var path = breadcrumb[index];
  myFrame.src = path; // 切换 iframe 的 src 属性
}

---

小结

我们首先要定义了一个数组 breadcrumb 来存储当前页面的路径信息，然后通过 myFrame.onload 事件来监听 iframe 加载完成后的事件，并在事件处理函数中更新面包屑导航数组，并调用 renderBreadcrumb 函数来更新面包屑导航的显示内容。
在 renderBreadcrumb 函数中，我们通过遍历面包屑导航数组来生成对应的 HTML 代码，并将其渲染到页面中的 breadcrumbEl 元素中。
最后，我们定义了一个 goToPage 函数，用于响应面包屑导航中的链接点击事件。在该函数中，我们通过截取面包屑导航数组来保留前面的元素，并更新 iframe 的 src 属性，以切换到对应的页面。