i have two domains. One for selling products that is https://sellproducts.com and the other for product documentation that is https://docs.product.wiki

In https://sellproducts.com i have page called docs ( https://sellproducts.com/docs) which i used iframe to call or display contents from https://docs.product.wiki

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

The https://docs.product.wiki have many pages example,

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

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

i want to use javascript or jquery to get the current url from iframe and display it in the browser like " https://sellproducts.com/docs?page=intro", when a page is clicked on or reloaded.

CodePudding user response：

If you can put some js on both side it's possible.

In order, there the logic you needs:

1. Create/Get iframe element -> document.createElement
2. Parse URL -> URLSearchParams
3. Catching click event on iframe's link -> createEventListener
4. Manage main window location -> window.top and window.location

Following could be a good start:

On your https://sellproducts.com/docs put this code:

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
}

And the https://docs.product.wiki side put this code in your global template (must be on all pages):

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();
    });
});

Feedback appreciated :)