Get url from external webpage loaded in a div with jquery/javascript

Question

I have a webpage, we will call it web1. This webpage has a div that contains an external webpage that will be web2. web2 is stored at our server so we have full control of it, so is web1.

The code at web1 to create the div that will contain web2 is as follow:

<div class="form-group">                
    <label class='control-label col-sm-1'>Design Report Searcher</label>
    <div class="col-sm-11">
        <div id="load-external"></div>
        </div>     
     </div>
</div>

And the jquery function to load the web2

$("#load-external").html('<object style="height:320px; width:100%;" data="https://external.my.company.com/" />');

Web2 contains a list of documents stored at a server.

The user will navigate in web2 and once he founds the document he wants, web1 will need the url to parse it.

Is it possible at all to get that url using jquery?

Answer 1

http is a stateless protocol, every request is separated and you don't have access to previous states unless you keep that informations

you can use cookie to save web1 url and use it when you have done with web2 or if its possible pass web1 url to web2 url by url query like:

web2.html?source=web1.html

or open web2 in iframe, indeed you're in both.

Answer 2

After some research I made it work.

First I changed the for an . The main reason is that I found this question that helped me understand the difference between iframe and object tags.

Then I used the following code to retrieve the current URL that is loaded at the iframe tag and display it at a textarea that will be send on the form to store it:

$('#report-textarea').val(document.getElementById('iframe-report').contentWindow.location.href);

It's important to understand that I can do this because both webpages are in the same domain. For security reasons, you won't be able to accomplish it if it is in a different domain.