如何从 iframe 获取当前页面 url 并显示在浏览器上

Question

我有两个域。一个用于销售产品https://sellproducts.com，另一个用于销售产品文档https://docs.product.wiki

在 https://sellproducts.com 我有一个名为 docs (https://sellproducts.com/docs) 的页面，我使用 iframe 调用或显示来自 https://docs.product.wiki 的内容

<iframe id="docs" src="https://docs.product.wiki/" frameborder="0">
</iframe>

https://docs.product.wiki有很多页面的例子，

https://docs.product.wiki/intro.html

https://docs.product.wiki/about.hml

当点击或重新加载页面时，我想使用 javascript 或 jquery 从 iframe 获取当前 url 并将其显示在浏览器中，例如“https://sellproducts.com/docs?page=intro"”。

Answer 1

如果两边都可以放一些js是可以的。

按顺序，您需要的逻辑如下：

1. 创建/获取 iframe 元素 -> document.createElement
2. 解析 URL -> URLSearchParams
3. 在 iframe 的链接上捕获点击事件 -> createEventListener
4. 管理主窗口位置 -> window.top 和 window.location

以下可能是一个好的开始：

在您的https://sellproducts.com/docs 上输入此代码：

window.onload = function(e) {
    const docsUrl = 'https://docs.product.wiki/';
    const queryString = window.location.search; //Parse URL to get params like ?page=
    let iframe;
    if(document.querySelector('iframe').length) //If iframe exit use it
        iframe = document.querySelector('iframe');
    else
        iframe = document.createElement('iframe'); //Create iframe element
    iframe.src = docsUrl; //Set default URL
    iframeframeBorder = 0; //Set frameborder 0 (optional)
    if (queryString !== '') {
        const urlParams = new URLSearchParams(queryString); //Convert to URLSearchParams, easy to manipulate after
        const page = urlParams.get('page'); //Get the desired params value here "page"
        iframe.src = docsUrl+page + '.html'; //Set iframe src example if ?page=intro so url is https://docs.product.wiki/intro.html
    }
    if(!document.querySelector('iframe').length)
        document.body.appendChild(iframe);//Append iframe to DOM
}

而https://docs.product.wiki 方将此代码放入您的全局模板中（必须在所有页面上）：

let links = document.querySelectorAll('a'); //Get all link tag <a>
links.forEach(function(link) { //Loop on each <a>
    link.addEventListener('click', function(e) { //Add click event listener
        let target = e.target.href; //Get href value of clicked link
        let page = target.split("/").pop(); //Split it to get the page (eg: page.html)
        page = page.replace(/\.[^/.]+$/, ""); //Remove .html so we get page
        let currentHref = window.top.location.href; //Get the current windows location
        //console.log(window.location.hostname+'/docs?page='+page);
        window.top.location.href = 'https://sellproducts.com/docs?page='+page; //Set the current window (not the frame) location
        e.preventDefault();
    });
});

感谢您的反馈:)