什么是iframe框架？
iFrame全称Inline Frame是HTML中的一个标签，用于在一个HTML文档中嵌入另一个HTML文档。iFrame框架可以将一个HTML文档嵌入到另一个HTML文档中的一个独立的窗口中，这个窗口可以独立于主窗口进行加载和渲染。
在一个页面中嵌入另一个页面，例如在一篇文章中嵌入一段视频。 在一个页面中嵌入一个广告，可以独立加载和渲染，不影响主页面的性能。 在一个页面中嵌入一个登录框，可以通过iFrame框架实现跨域登录。
什么是面包屑
面包屑（Breadcrumbs）是网站或应用程序中的一种导航方式，通过显示用户当前所处页面的路径来帮助用户快速定位到自己所需的内容或页面。
通常面包屑以一种层级结构的形式展现，每一层级代表一个页面或分类，用户可以通过点击面包屑上的链接回到之前的页面或分类。
你比如说，一个面包屑可能是这样的：
首页 > 电视 > 智能电视 > 55英寸智能电视，这表示用户当前正在查看的是55英寸智能电视的页面，并告诉用户如何回到电视或首页。
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 属性 }
