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

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

什么是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 属性
}
相关文章
|
1天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
2天前
|
JavaScript 前端开发
|
2天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
2天前
|
存储 前端开发 JavaScript
使用JavaScript实现复杂功能——一个交互式音乐播放器
使用JavaScript实现复杂功能——一个交互式音乐播放器
|
2天前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
69 0
|
25天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
59 1