Changing window location, then waiting for the window to load?

Question

Bear with me, I'm a complete noob to Javascript :P. So, what I want to do is use a function to load a web page. And, after that function is done I want to be able to grab the HTML code of a certain element on a page. Here's my code so far:

function change(){
    window.location = "www.aWebPage.com"
    window.onload = function() {
     return document.ID_HERE.outerHTML;
    }   
}

For whatever reason the return of the HTML code doesn't work, but the redirect does. Am I return the value to the function properly? Is there another way where I could use multiple functions that only executed after the window has been redirected?

Solution 1

the code after window.location won't be executed because the document is not longer exists.

Solution 2

Every page load wipes all previous JavaScript, so you can't do that. Your best chance is to use ajax to load a new page without unloading the current one. But that will only work if both page are from the same domain, due to security restrictions.

Solution 3

This is because once javascript reads the window.location the page is refreshed and all subsequent code does not get executed. To get around this we use hash tags and query strings. You could for example change the location to be www.awebpage.com#id. Then use javascript to detect the "#id" in the querystring and execute your code. I have written up a sample below:

function change(id){
    window.location = "www.aWebPage.com#id=" + id;
}

window.onload = function() {
    var hash = window.location.hash;
    if (hash.length > 0)
    {
    var id = hash.replace('#id=','');
    return document.id.outerHTML;
    }  
} 

Solution 4

write your script in html file and add it after including jquery js file.

Keep below code in a js file, eg-test.js

function change(id){
    window.location = "www.aWebPage.com#id=" + id;
}

and in html-

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/test.js"></script>
<script>
      var hash = window.location.hash;
      if (hash.length > 0) {
      var id = hash.replace('#id=','');
      return document.id.outerHTML;
      }  
</script>

View more solutions

Comments

[Not My Name Car]

Could I use a function that would check to make sure the current URL matches the one I want to load? Then I could call another function on the loaded page that got the document HTML?

[bfavaretto]

Yes, as Vortex suggested, you can check the current url at window.location.href

[Not My Name Car]

Would: if (window.location.href.match(/\anywebsite.com/)) { return document.ctl00_plnMain_rptAssigmnetsByCourse_ctl00_dgCourseA‌​ssignments.outerHTML‌​; } Be valid Javascript?

[Vortex]

Yes or you could use if (window.location.hash == '#test')

[Not My Name Car]

What does the #test mean? Sorry I don't know anything about Javascript D=

[Vortex]

The #test is what's called a hashtag. It is how we input variables into the browser. You could use whatever you want, it could be #reload if you want. You tell the browser that when it detects the hashtag #reload, then execute some code.

[Vortex]

I have edited the answer to display some example code of what I mean. If this helps would appreciate you marking my answer correct:)