How to create a function in javascript that generates a breadcrumbs taking both the visible content in url and the page loaded inside the Iframe tags

Question

I have a page called sem_menu.html which contains an iframe:

    <div class="container_frame">
        <iframe id="frameapplication" name="frameapplication" scrolling="no" src="sem_menu2.html" style="width: 100%;height:1000px;border:0px"></iframe>
    </div>

And a div with id "breadcrumbs" in which inside I need to load all the url path that the user does with the data passed in url and in iframe

    <div id="breadcrumbs">
        <i class="fa fa-home icon_breadcrubs fa-sm"></i>
    </div>

I tried a function but it doesn't seem to work, is there anyone who can help me? A thousand thanks!

function getBreadcrumbs() {
    var lease = location.href.split('/').slice(3);
    var parts = [{
        "text": '<a href="sem_menu.html"><i class="fa fa-home icon_breadcrubs fa-sm"></i>' + 'Home' + '</a>',
        "link": '/'
    }];
    for (let i = 0; i < lease.length; i++) {
        var part = lease[i];
        var text = decodeURIComponent(part).split('.')[0];
        var link = '/' + lease.slice(0, i + 1).join('/');
        console.log(link);
        parts.push({
            "text": text,
            "link": link
        });
    }
    return parts.map((part) => {
        return "<a href=\"" + part.link + "\">" + part.text + "</a>";
    }).join('<span style="color:#7c7c7c">/</span>');
}
document.getElementById("breadcrumbs").innerHTML = getBreadcrumbs();