I want to inject a new state to browser history when the platform is loaded for the 1st time so when the user clicks browser back button it should land to the home page of the app.
I tried to add new state using
1. PlatformLocation pushState()
2. window.history.pushState()
location.pushState(null, 'home', 'home');
// window.history.pushState(null, 'home', 'home');
I even tried giving full URL
location.pushState(null, 'home', 'http://localhost:4200/home');
// window.history.pushState(null, 'home', 'http://localhost:4200/home');
It does add a new state to browser history but when I click browser back button, nothing happens i.e. I am still in the same page but only the newly added state is removed from the browser history.
I already answered this in your other question here: https://stackoverflow.com/a/55511843/11289490
When you call to the history.pushState , it only adds one page to the history with the url you want, but It doesn't load the webpage or check if it exists.
If you want to load the home page when you navigate back you can do something like this :
let locat = location.href;
if (!!window.location.pathname && window.location.pathname !== '/') {
history.replaceState(null,null,location.origin);
history.pushState(null, null,locat);
}
It adds a history with the url base and then add the complete url in the history.
Related
I have one page with list of reports and after clicking on report it redirects me to internal report page in new tab with:
window.open(reportIdUrl,reportId);
So when i am back on report list and i want to open same report i will use
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
But when someone from new tab with internal report page navigates somehow to report list page (within this tab) and then tries to open internal report page it will open it in same tab as it is tab reference not content reference.
Does anybody know some way to drop reference when i access if condition?
Something like:
window.open("",reportId);
if(redirect.location.href === "about:blank" || redirect.location.href !== '<internalreportpage>') {
window.dropReference(reportId) //change_me
redirect = window.open(reportUrl,reportId);
redirect.focus();
} else {
redirect.focus();
}
So it will create new tab with new reportId reference?
Thanks
EXAMPLE
--reportlistpage
linkToReport1 (window.open(report1Url,1))
linkToReport2 (window.open(report2Url,2))
.
.
.
You click on linkToReport1 - 2 tabs are opened. One with reportlistpage and one with internal-report/report1.
You go back to parent tab and click to linkToReport1. Tab is opened with reference to "1" and will focus to it and no new tab is opened (this is ok).
You are on linkToReport1 and you redirect with some menu hyperlink to reportlistpage (within linkToReport1 tab). Url changed to /report-list
You click to linkToReport1. Nothing happen (this is not ok) because you are on the tab with reference to 1 (content and url changed), now you want to open a new tab with /internal-report/report1 url and store it as 1 with window references.
I figured it out. It is bit simple when you realize you can set or reset window.name. So there is nothing like references from parent.
Based on content you can do something following. In the page you want to keep track in tab,
at the beginning (in my case internalReport id):
var currentWindow = window.self;
currentWindow.name = reportId; //this is in case someone manually opened it without window.open(internalReportUrl, reportId)
then bind resetting of window.name on beforeunload event (e.g.):
var resetWindowName = function() {
var currentWindow = window.self;
currentWindow.name = ""
}
window.addEventListener('beforeunload', resetWindowName);
So when you redirect from internalreportpage somewhere, name is cleared and you can repeadetly call
window.open(internalReportUrl,reportId)
which will open new tab for you.
I am writing a very very little extension to append an argument to a specific URL
Here is what I have now in a background script:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (tab.url.indexOf("developer.apple.com/reference") != -1 && tab.url.indexOf("?language=objc") == -1) {
var objcURL = tab.url + "?language=objc";
chrome.tabs.update(tab.id, {url: objcURL});
}
});
The issue with this is that it ruins my navigation stack. For example, if a user goes to
https://developer.apple.com/reference/appkit/nsapplication
it will then navigate the user to
https://developer.apple.com/reference/appkit/nsapplication?language=objc
And if they hit back, it will go back to the first link, which then just redirects the user to the second link again. So you can never back out
My question is, is there any way to redirect the user directly to the second link when they make a request for the first link?
This is my url:
DOMAIN-NAME/#city=13&pc=13&car=18.26+2.97
Now when user clicks browser back, the query string parameter gets removed one by one, like:
First browser back:
DOMAIN-NAME/#city=13&pc=13&car=18.26
Second browser back:
DOMAIN-NAME/#city=13&pc=13
Third browser back:
DOMAIN-NAME/#city=13
The problem is that on browser back the page is not reloading.
I read about hashchange, pushstate but i am unable to figure correct way to reload page on browser back?
I tried this:
var hash;
$(window).on('hashchange', function () {
if (hash != window.location.hash) {
alert('hash change called');
//window.location.reload(true);
}
hash = window.location.hash;
});
This is repeatedly reloading my page when i am refreshing it.
What you need is 'windows.location' it allows you to check the current URL and assign a new one or force to reload in this case. JavaScript Window Location
you could do something like:
function reload(){
window.location.assign(window.location.href);
}
when you detect navigation... could be with the HTML onbeforeunload Event Attribute or something like that...
<body onbeforeunload="return reload()">
I have to restrict my app to one tab and one browser at one time. I am doing it through Javascript and cookies. Basically I am checking when a user hits my site after login if cookies are set or not. If they are then redirect to logout, otherwise set new cookies.
$(window).load(function() {
if(!$.cookie('number')) {
$.cookie('number', 1);
} else {
$.removeCookie('number');
window.location = "{{ url('/logout') }}";
}
});
When the user tries to open the web site in a new tab as a cookie is already set from the first tab then it will redirect to logout:
$(window).unload(function() {
$.removeCookie('number');
});
When user comes back to the first tab due to the focus() event it will check if a cookie is set or not. If not then it will redirect to logout
$(window).focus(function() {
if (!$.cookie('number')) {
//$.removeCookie('number');
window.location = "{{ url('/logout') }}";
}
});
My problem is that when I open a new site on my active tab, lets say I opened my web app first time then I open any other web site by typing a URL, when I come back to my site it is still showing my app although it should redirect to logout.
I'm using pushState and generating the page view on popstate events based on the history.state of the current page.
If there is no history.state I (hope) to reload the document.
window.onpopstate = function(event) {
if( window.history.state !== null ){
// page was ajax created and history created by pushState
// recreate with ajax
}
else{
// page was loaded from server normally
document.location.reload()
}
}
At issue is Safari fires a popstate event on the initial page load.
Chrome and Firefox fire popstate on the back/forward browser button.
I want to ignore the initial load popstate event on Safari (ideally without setTimeout and without browser detection).
Additionally, the site is a mix of links - some that will trigger pushState and some that will load normally from the server - so if a user is ten pages into navigation history and clicking the back button, the history will have a mix of pushState pages and non-pushState pages.
I have solved the problem saving the initial order value obtained from window.history.state.order in a variable. When the on popstate event is triggered, the value previously stored is compared to the current order value. It they are the same then nothing is needed to be done (you have to ignore the initial popstate value triggered by Safari). Here you can see and example:
var initial_oder = window.history.state.order || 0;
window.onpopstate = function(event) {
if( window.history.state !== null && window.history.state.order !== initial_order){
// page was ajax created and history created by pushState
// recreate with ajax
}
else{
// page was loaded from server normally
document.location.reload()
}
}
Hope this help!