Get the URL from previous page using javascript - javascript

I have page A and B. in my page A, I have link that direct me to page B.
What I want to do is, when I click the link in page A, it will open page B, and also give me alert of page A`s URL. Here is what I try:
page A:
<html>
<head>
click me
</head>
</html>
page B:
<html>
<head>
<script type="text/javascript">
var oldURL = document.referrer;
alert(oldURL);
</script>
</head>
It opens the page B when I click it, but the alert is blank. How can i do this?

alert(document.referrer);
That should alert the referrer.

NOTE: I moved this out of the comments because it describes the real issue.
The original issue with the code has to do with the file:/// URI you've used for page B. There will be no referrer. But if you run this code from a server it works fine. Here's proof: Plunkr
When you load a file from the file system (using file:// protocol) the referrer header is not set. You can easily see the difference if you open the network panel in dev tools and look at the headers for both pages. Opened with file:/// no headers, from Plunkr has correct referrer header.
So your code works fine (but the anchor tag should be moved).
You don't need to do window.open() or use local storage or anything crazy like that.

You can save your latest visited url in sessionStorage
on Page A:
sessionStorage.setItem('url', window.location.href);
on Page B
alert(sessionStorage.getItem('url'))

Add click me out of the head tag. And print oldURL variable insted of window.location.href which is the current URL.
Page A
<html>
<head>
</head>
click me
</html>
Page B
var oldURL = document.referrer;
alert(oldURL);

You can pass it in the URL:
window.open("b.html?referer=" + window.location.href);
You can also use the opener object to get a parent window's variable:
a.html
<html>
<script>
var referrer = window.location.href;
var win = window.open("b.html");
</script>
</html>
b.html
<html>
<script>
alert(window.opener.referrer);
</script>
</html>
As #RandyCasburn mentioned above, you also have to move the tag from the head to the body for it to be visible:
<html>
<head>
</head>
<body>
click me
</body>
</html>

You can use document.referrer
Refer the following code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alert</title>
</head>
<body>
Link
<script>
function onLinkClick() {
alert("Redirected from==>"+document.referrer);
}
</script>
</body>
</html>

Related

Page redirect using the javascript "Form" method

I set up a page redirect using javascript, and the "Form" method from the following website:
https://webworkshop.net/auto-redirecting_methods
I set this up a few weeks ago, and it worked fine then. However, when I looked at it the other day it was no longer working.
Can anyone shed any light on this?
Thanks
Mark
It looks like you're simply wanting to redirect:
You can do it with JavaScript and HTML Meta tags
<!doctype>
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.yourdomain.com/new-page.html">
</head>
<body>
Auto refresh in 0 seconds
</body>
</html>
The other method is by using JavaScript, like below:
<!doctype>
<html>
<head>
<script>
window.location = 'http://www.yourdomain.com/new-page.html';
</script>
</head>
<body>
This would also redirect as soon as the page loads.
</body>
</html>
Hope that helps

Get Back Button to work on parent page when iframe is involved

I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.

How to get window URL after redirect?

var win = window.open('http://example.com/login');
console.log(window.location.pathname); // /login
How to get pathname after /login page redirect me to other page?
Thanks in advance.
You can use win not window to retrieve it.
console.log(win.location.pathname);
Please note that you can retrieve the path only after the redirection is completed. So I guess you can get the path data by using timer or some other events ( e.g. click ) like below:
<script>
var win = window.open('http://example.com/login');
function showChildURL(){
alert(win.location.href);
}
</script>
showChildURL
index.html
<html>
<body>
<script language="javaScript">
var win = window.open('1.html');
function showChildURL(){
alert(win.location.pathname);
}
</script>
showChildURL
</body>
</html>
1.html
<html>
<head>
<meta http-equiv="refresh" content="0;URL='2.html'" />
</head>
<body>
<p>This page will be redirected to 2.html</p>
</body>
</html>
2.html
<html>
<body>
This is 2.html
</body>
</html>
Hope this helps.
What you want to achive is communication between browser tabs/windows. You'll have to use cookie or localStorage to notify your main window about redirected url. Take a look at LocalConnection.

Javascript or jquery: Can you load a page and then call a function?

Scenario: You have a script that users can place on their website and when they click on it, it redirects to my website then calls a function only after they have successfully been redirected to my website and the function is part of my website, so there shouldn't be any problem with the same origin security policy.
So is the scenario possible?
EDIT
Ok now that I know that it can be done, I run into a pickle doing this.
function main(){
$(document).ready(function($){
window.location.href = 'http://www.example.com/michael';
theclient.chat();
});
}
I want theclient.chat() to be called after example.com/michael is loaded but it's not working.
UPDATE 2
function main(){
window.location.href = 'http://www.reflap.com/michaelnana';
$(document).ready(function(){
theclient.chat();
});
}
So will this work?
You have to call that function on your own site in the following block:
Source page:
function main(){
window.location.href = 'http://www.example.com/michael';
}
Target page (http://www.example.com/michael):
$(document).ready(function(){
theclient.chat();
});
To be clear: this will be called, if you type the URL of the page too and not only after a redirect.
You should add a URL parameter when you do the redirect, if you want to call it only after a redirect.
UPDATE:
You cannot call a function on the original page, after the redirect has been done.
On your target page, if you include the jQuery library, use this code:
$(document).ready(function(){
theclient.chat();
});
The ready() method makes sure the page (http://www.reflap.com/michaelnana) is rendered before running your JavaScript.
I've included 3 sample files that should serve as a skeleton for what you're trying to do.
www.external-site.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>3rd Party Page</title>
</head>
<body>
<script type="text/javascript"
src="http://www.example.com/michael/embed.js">
</script>
</body>
</html>
www.example.com/michael/embed.js
// load jQuery, keep it in our scope
// I'll not explain how this works but if you're making an embed
// script for other sites, you must make sure to encapsulate all
// your dependencies such as jQuery.
loadDependencies(function($) {
// document onload
$(function() {
// create a button that redirects to example.com/michael
var button = $('<a>').text('click me').click(function() {
window.location.href = 'http://www.example.com/micahel';
});
// insert that button after this script tag
var src = 'http://www.example.com/michael/embjed.js';
$('script[src="' + src + '"]').after(button);
});
});
www.example.com/michael/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Landing Page</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="theClient.js"></script>
<script type="text/javascript">
$(function() {
// all visitors to this page will trigger this call, not just
// the ones who came from the script embed. If you want to
// differentiate I'd recommened adding a query paremeter to
// the redirect and reading it there.
theClient.chat();
});
</script>
</head>
<body>
</body>
</html>

meta refresh redirect to top frame

I have the following code:
<html>
<head>
<title>title of this stuff</title>
<script language="JavaScript">
if (top != self) top.document.title = document.title;
</script>
<meta http-equiv="refresh" content="2; URL=javascript:window.open('certainpage.html','_top');">
</head>
<body>
Body of this page
</body>
</html>
and this doesn't work.
I've googled for this and come to the same conclusion everywhere: this should work.
But it doesn't. Can anyone help me out why this page isn't:
1. refreshing as long as I have the javascript in there (and yes, js is enabled in my browser)
2. refreshing to the new page in the top frame
Any help would be appreciated!
Javascript won't work in the refresh meta tag like that.
As you're using javascript anyway, keep it simple like this:
<script type="text/javascript">
window.top.location = 'http://domain.tld/whatever/';
</script>
But there's also a better (because smarter) way to do it. This doesn't require you to hard-code the URL for each page. It checks if the page is topmost and if not, if calls the page's URL to the top:
<script type="text/javascript">
if(window.top.location != window.location)
{
window.top.location.href = window.location.href;
}
</script>
And if you would prefer to completely avoid using javascript (which some users will have disabled), there's also an even simpler way to do it. Add the following to your head section and all links on that page will open "topmost":
<base target="_top">
All you have to do is to choose one of these three options. All of them should get you going just fine.

Categories

Resources