In javascript, redirect page which sends data to the server before transitioning to a new page

Question

I am trying to create a redirect page which sends data to the server before transitioning to a new page, with javascript like following code.

<body>

<script type="text/javascript">

****
light transaction about cookie
****

document.createElement("img").setAttribute("src", "server.php?param1=cookiedata");

location.href = "new_page.html";

</script>

</body>

However, before redirecting to "new_page.html", sometimes

document.createElement("img").setAttribute("src","server.php?param1=cookiedata");

is not called, and cannot send a data to "server.php".

Is it a problem that the redirect time is short?

Could you tell me how to solve?

score 0 · Accepted Answer · edited May 23 '17 at 11:46

0

The problem is that sometimes the request to load the source material for the is not sent before the redirection happens.

The solution is simple: You can use the onload event to add a handler which is called after the img has been loaded.

so something like this

function refirectAfterTransmit() {
  window.location.href = "/new_page.html";
}

var img = document.createElement("img");
img.addEventListener("load", refirectAfterTransmit);
img.src = "server.php?param1=cookiedata";
document.appendChild(img)

Let me know if this helps!

edit: thanks Jaromanda X for comments

edited May 23 '17 at 11:46

Community

1
1

answered Jan 05 '17 at 03:23

jakee

18,486
3
37
42

`.setAttribute("onload", refirectAfterTransmit);` that's not valid javascript! – Jaromanda X Jan 05 '17 at 03:28
thus, I said "something like this", more of a pseudocode thing going on there – jakee Jan 05 '17 at 03:29
fair enough ... I've never thought of using pseudocode as an answer :p – Jaromanda X Jan 05 '17 at 03:30
2

I'd use `img.src =` and `img.addEventListener('load', ...` myself :p – Jaromanda X Jan 05 '17 at 03:35
that would make for a more beautiful solution, yes – jakee Jan 05 '17 at 03:37

score 0 · Answer 2 · edited May 23 '17 at 12:33

have a look at this: Wait for image to be loaded before going on

you might want to wait for the "image" to be loaded. then you are sure the request has been sent.

<body>

<script type="text/javascript">

****
light transaction about cookie
****

function loadSprite(src, callback) {
    var sprite = new Image();
    sprite.onload = callback;
    sprite.src = src;
}


loadSprite('server.php?param1=cookiedata', function() {
    location.href = "new_page.html";
});



</script>

</body>

In javascript, redirect page which sends data to the server before transitioning to a new page

2 Answers2