Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

279
Vistas
How to get the current page url from iframe and display on the browser

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.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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 :)

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda