CODEWITHSUNDEEP
javascriptjquery
Stephanie Caldwell
Stephanie Caldwell

Reputation: 647

How can I execute a script after calling window.location.href?

I have a script that redirects the user to another page. I want to load some content into a div on the new page after the new page has fully loaded. How can I do this. The following doesn't work.

function goToPage() {
    window.location.href = 'http://www.mypage.com/info';
    $('.my_class').load('my/url/path/with/content/to/load');
}

The newly loaded page http://www.mypage.com/info contains the following div:

<div class="my_class"></div>

What am I doing wrong?

Upvotes: 24

Views: 55578

Answers (8)

Tombatron
Tombatron

Reputation: 1347

Redirect to the new page, but append a hash signal to the URL.

function goToPage() {
    window.location.href = 'http://www.mypage.com/info#load-stuff;
}

Then on load of the target page, evaluate the URL checking for that hash signal. 

function pageLoad() {
    if (window.location.hash === "#load-stuff") {
        $('.my_class').load('my/url/path/with/content/to/load');
    }
}

If your application is using jQuery it'd look something like:

$(function () {
    if (window.location.hash === "#load-stuff") {
        $('.my_class').load('my/url/path/with/content/to/load');
    }
});

That's the rough idea at least.

Upvotes: 19

Radmation
Radmation

Reputation: 1534

An easy way to pass data to your page you are redirecting to would be to set some url parameters.

For example:

window.location.href - "http://youpage.com/?key=value"

When that page loads you could have a:

$(document).ready(function(){

    var my_param = getUrlParameter('key');
    if(my_param == "value"){
//do your stuff here
}

});


var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

Upvotes: 4

javad hemati
javad hemati

Reputation: 252

window.location = '#/MyPage';
setTimeout(function() {
   //MyCode To Run After PageLoad
});

Upvotes: 3

theMightyT
theMightyT

Reputation: 112

You can do this a few different ways. Try leveraging the localstorage API and passing info or content with a name and value pair (or a few of them) and unpack it on the receiving end.

On the page you're redirecting to, check for the localstorage key, and then load the contents of it (the aforementioned name and value pairs) into a div.

As an alternative, you can write one script file that you can deploy to several pages; do a check on window.location.href and conditionally load script accordingly. If you're on the redirected page, you can run whatever script you like. The nice part about doing it this way is that you're still working with one JS file - no need to fragment your code (assuming, of course, that the pages you're working with are all on the same site).

You don't need to do anything with php if you don't want to, or hashes... there's a few nifty tools that will do the trick if you can leverage HTML5 and its associated APIs.

Upvotes: 2

Hauke P.
Hauke P.

Reputation: 2843

As pointed out in the other answers, you won't be able to perform any script instructions from your original site. Instead of using PHP to create the content statically, you could also use HTML fragments as arguments, e.g. like this:

// in the original page:
function goToPage() {
    window.location.href = 'http://www.mypage.com/info#my/url/path/with/content/to/load';
}

// in http://www.mypage.com/info:
$( document ).ready(function () {
    if(window.location.hash)
        $('.my_class').load(window.location.hash.substring(1));
}

Upvotes: 3

pattyd
pattyd

Reputation: 6170

Once you redirect you can no longer execute scripts on that page, as the page is unloaded.

Try this,

redirect page:

function goToPage() {
window.location.href = 'http://www.mypage.com/info;
}

mypage.com/info:

js:

$('.my_class').load('my/url/path/with/content/to/load');

html:

<div class="my_class"></div>

I hope this helped you out, and let me know if you need further assistance!

Upvotes: 1

Bill Criswell
Bill Criswell

Reputation: 32941

You should just run

$('.my_class').load('my/url/path/with/content/to/load');

on this page: http://www.mypage.com/info.

When you do window.location.href = 'http://www.mypage.com/info'; you're redirecting to another page. Nothing after that line will happen. You have to instead run the code after that line on the page that's loaded.

Upvotes: 3

Alfie
Alfie

Reputation: 2350

You are redirecting the browser with window.location.href and I'm afraid as you are purely just changing the browser's location, you can't have any affect/input on the page you are moving to (unless you use query string parameters and then create content with something like PHP (myurl.php?newcontent=whatever) )

Upvotes: 1

Related Questions