JS中iframe如何却写面包屑功能

目录

什么是Iframe:

什么是面包屑:

面包屑的Iframe实现:

 Demo:

---

什么是Iframe:

frame，全称为嵌入式框架，是一个HTML标签，用于创建内联框架以在当前HTML页面中嵌入另一个文档。它承载了一个单独的嵌入窗口，这个窗口有自己的document和window。我们可以通过iframe标签的src属性指定要嵌入的页面的路径,iframe还有一些常用的属性，比如可以设置其高度（height），重要性（importance）以及名称（name）等等。同时，所有的主流浏览器都支持iframe标签。值得注意的是，HTML5相对于HTML 4.01增加了一些新的属性，同时也去掉了部分属性。
Iframe的应用场景:

iframe的典型应用场景包括跨域通信，如网页编辑器等。例如，当用户打开了多个标签页时，只有一个在播放音乐播放器。此外，iframe还用于解决ajax化网站响应浏览器前进后退的问题。

另一种常见的应用场景是无刷新的文件上传。当formData不可用时，可以创建一个iframe作为代替方式。

邮箱也常用iframe，例如QQ邮箱。同时，iframe还可以创建一个全新的独立环境来加载广告，比如联盟广告。

iframe解决了什么问题:

iframe作为一种HTML元素，其主要作用是创建内联框架以在当前HTML页面中嵌入另一个文档。它的使用场景多样，解决了多种问题。例如，当一个网站的多个页面的导航栏部分相同，为了避免在切换页面时重复下载，可以通过将导航栏和正文分开放在iframe中进行加载。此外，iframe还能够解决跨域的问题，通过嵌套支持postMessage方法，完美避开跨域的问题。

同时，iframe的使用也带来了一些安全性问题。例如，当网站设置了X-Frame-Options为DENY或SAMEORIGIN时，浏览器将不允许将该页面在iframe中加载，以防止点击劫持等安全问题。

什么是面包屑:

面包屑是一种小文本路径，通常位于页面顶部，用于显示用户在网站中的位置，以及如何返回上一级页面。这个概念源于一个童话故事“汉赛尔”和“格莱特”兄妹俩，当他们被带到森林中时想到通过沿途撒下面包屑来帮助他们能够找到回家的路。所以，面包屑导航意在告知用户所处的当前网页的位置，方便用户可以通过该导航快速返回上一级网页。

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

面包屑的作用在于：

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

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

面包屑的Iframe实现:

在iframe框架中，实现面包屑导航通常由父窗口来维护和显示。具体的实现思路可以是这样的：首先，在父窗口中定义一个数组，用于存储当前页面的路径信息。例如，我们可以创建一个名为breadcrumb的数组，其内容为['首页', '分类', '电视']，这样就能清楚地显示出用户当前的访问路径。然后，我们需要动态生成面包屑导航数据，这些数据包括面包屑导航的文本和链接，这可以通过前端路由或者URL参数等方式获取用户当前的访问路径信息来实现。最后，渲染面包屑导航，将其显示在页面上。

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

 Demo:

在HTML中创建无序列表和iframe:

    
    
    


    

        
页面1
        
页面2
        
页面3
    
    
    

在JavaScript中编写代码以监听点击事件并更新iframe内容：

// main.js
document.addEventListener('DOMContentLoaded', function() {
    var breadcrumb = document.getElementById('breadcrumb');
    var content = document.getElementById('content');

    breadcrumb.addEventListener('click', function(event) {
        if (event.target.tagName === 'A') {
            event.preventDefault();
            var url = event.target.getAttribute('data-url');
            content.src = url;
        }
    });
});

这个示例中，当用户点击面包屑中的链接时，iframe的内容会更新为相应的页面。请注意，这个示例仅适用于静态页面，如果需要动态加载页面内容，可以使用Ajax或其他技术。