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.
Related
I have a very simple setup on a dev server (both pages are on my local test server localhost:5500) where I have a main page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example Mockup</title>
</head>
<body>
<iframe src="./nested.html" id="frame"></iframe>
<script>
var iframe = document.getElementById('frame');
console.log(iframe.contentDocument.body);
</script>
</body>
</html>
and a nested page
<html>
<body>
<div id="hello">Hello, World</div>
</body>
</html>
when I load the main page in my browser the output written to console is: <body></body>
I can access the element #hello using iframe.contentDocument.getElementById('hello') but I want the body element including child elements. Can anyone please explain to me why is this happening
You have to wait until iframe loaded completely to access it's body.
var iframe = document.getElementById('frame');
iframe.onload = function () {
console.log(iframe.contentDocument.body);
}
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>
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.
I am currently working on a Cordova project in Visual Studio. In this project, I am trying building 2 html pages, let me call them first.html and second.html.
In the first.html, I want to add a link to second.html, which allows me to navigate to second.html. I tried 2 ways.
window.location
window.location = "second.html"
tag
<a href=“second.html”></a>
As a result, they both caused an error saying "Exception occurred
Message: Exception: Cannot redefine property: org".
Can anyone tell me how to navigate to a new page properly?
You can navigate to another page using window.location.href. An example is shown below
function(){ window.location.href = "second.html";}
try this it work's for me
<!DOCTYPE HTML>
<html>
<head>
<title>My PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova-x.x.x.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad()
{
document.addEventListener("deviceready", onDeviceReady, true);
}
function onDeviceReady()
{
// navigator.notification.alert("PhoneGap is working");
}
function callAnothePage()
{
window.location = "test.html";
}
</script>
</head>
<body onload="onLoad();">
<h1>Welcome to PhoneGap</h1>
<h2>Edit assets/www/index.html</h2>
<button name="buttonClick" onclick="callAnothePage()">Click Me!</button>
</body>
</html>
You can use the below line to navigate one page to another page.
$('#yourelement').click(function(){
window.location.assign('name_of_page.html');
});
Try this:
window.open("second.html");
window.open opens a new window/tab with the selected URL, while the mentioned method in the question redirects the current page to the selected URL.
Essentially, all I want to do is open an external web page after the current page is loaded via java script.
open my page -> javascript tells browser to open external page -> external page being loaded into the broser
How may I accomplish this?
you may use this
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
Hope it should be window.location. Check the code.
Technically you can:
location.href = "http://example.net/";
… but you should perform an HTTP redirect instead as that is more reliable, faster and better food for search engines.
You can also use the "open" method to open the source file or url on a new window.
window.open("anyfile.*");
or
window.open("http://anylocation.com");
Hi please try this code for page loading time we will redirect whatever u configured the urls.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
window.open('https://google.com');
}
</script>
</head>
<body onload="myFunction()">
</body>
</html>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<body>