I have an application where you can display 2 kind of content.
There are 3 "main content" pages, which have the urls:
/ (root)
/favorites
/timeline
There is also a settings popup. It goes on top of the "main content". I should be able to deep-link to this setting popup directly. Opening that link directly (like, from an email) should lead to the content displayed for the root / in the background with the settings popup opened in the foreground.
When the settings popup gets closed, it should not affect main content that was under the popup. Url should take back its previous value (the one of the main content: one of / /favorites or /timeline)
Usecase: being somewhere, opening the settings popup, and then closing it.
Be on /favorites
Click on /settings link
Settings popup should open
Click on close button in settings popup
Settings popup should close and url should be /favorites
I'm having trouble implementing this. I've tried to use history.goBack() but it is actually not what I want. On close I don't want to go back, but I actually want to push a new /favorites entry into the history.
Also, using goBack means that if the user comes directly from link /settings, then there's nowhere to go back because there's no back history entry...
I'm also trying to see how I could use history.push() but it seems a bit unnatural to me (and very tightly coupled!) that my settings popup could have to do something like history.push("/favorites") to close itself...
Any idea on how to solve this problem in an idiomatic way?
Related
I have a site that offers users the chance to download files by clicking a button which loads a rest request then uses file-saver to download it.
The second time a user in Chrome clicks this they get a popup blocker. The message is "This site attempted to download multiple files automatically". How does Chrome determine when to show this message? Can I do something to reset it?
The site is loaded as an iframe within microsoft teams. But I don't think that is the issue
Fire up Chrome, click the menu icon, and then click “Settings.” Alternatively, you can type chrome://settings/
Once in the Settings tab, scroll down to the bottom and click “Advanced.”
Scroll down to the Privacy and Security section and click on “Site Settings.”
Scroll down the list of settings until you see the “Automatic Downloads” option. Click on it.
By default, the feature is set to ask permission when a site tries to download files in succession. This is the recommended behavior, but if you want to block all sites from downloading multiple files automatically, toggle the switch to the Off position.
I have a back button that is suppose to lead me users back to a page in the history. But the issue is that when you right click and open in a new tab when the user clicks on the back button it does not work.
To clarify i have a page with products and there are buttons that go to the checkout page. On that check out page there is a back button using history.back(). but after testing opening the buy button on a new tab makes the back button unusable.
I need a way to prevents this please thank you.
I don't think there is a function for that, but I see two possibilities:
document.referrer (like APAD1 suggested in the comment section):
The referrer property returns the URL of the document that loaded the current document, hence if you do document.referrer, you will only get the URL from the page where you clicked the button to load the current page.
If you want to be able to not only go to the previous page but also remember the pages loaded before the previous page, then see next option
window.localStorage and document.referrer
Since document.referrer only remembers the previous document's URL, you can use window.localStorage to store the history. You can create an array as a localStorage item and add new URLs as you go forward and remove Urls as you go back to a previous page inside the new tab
More info:
- document.referrer
- document.referrer
- Window localStorage Property
My web application is mimicing the UI of my desktop application, flow is as follows
Select Task in browser window
Change any Options and then start
Show Progress in same browser window, the progress bar goess back to server every 5 seconds checking progress.
When task has completed we show report in new tab
and go back to Select task Window,
this is done by running following Javascript in progress page
window.open('/start','_self'); window.open('/reporturl','_blank');
This works fine on my PC but when trying on Safari on OSX and on Android phone and iPad one of two things happen
The progress page becomes the start page but the report page is not opened in tab
The Progress page becomes the report page
My question is does opening window in new tab with _blank have all the problems of using popup windows. If so should I modify my prcoess so that at stage 3 it just displays report page, and then add a back button or navigable footer to the report to allow user to get back to start page ?
I can think of some options you could use instead of new tab.
Modal with Ajax
-- With jQuery it is posible to open modal
dialogs they can be populated with html (or other data) fetched with ajax (async). I am a big fan of these and use them all over my projects. Users will not be annoyed with pop-up warning messages, etc. Once the content is read (or whatever) the user can simply close the dialog. (If I had to make your app I would certainly implement this).
Besides the jQuery dialogs, other modal/dialog scripts are out there. Check out Bootstrap Modal if you like it modern.
Serve report as download
-- Depending on what the user can/will do with the report, it might be interesting to write the report page in a way that it sends back a .pdf file, or another type of file, as download. Loading the URL in a new tab will now always start a download. Triggering this from JS without user interaction might be a problem though (same as with pop-up / new tab). Adding a button to trigger the download on complete will solve this.
I know the question was about the use of tabs.. But try to avoid it. Browsers handle it all in their own way. And many users get confused when suddenly stuff is opening in tabs when they did not ask for it. In case of pop-ups, it is possible for users to turn them of or convert into opening a new tab from within the browser settings. If they have been fiddling with browser defaults, you'll have troubles of keeping the 'flow' of the app the same for all users (and cross browser).
For example HTML's href tag has a target attribute that can force the page to be opened in a new window. But conceptually is this a good idea? Should the content determine how the user should read it? Or should this be entirely up to the user (right click -> open in new window)?
I disagree. A link shouldn't be forced to open in a new window. If the user wants to open it in a new window then it is up to them.
Normally when we redirect to a link which is of the current site then it should/may open in the same window. But if the link redirects us to another sire then its better to open it in a new window so that the user will stick to our(current) site. There is no specific rule. It is mainly done as per client's requirement.
One drawback of in opening the link using right--> click is it makes the user do one extra click. In case your page has 5 links and the user wants to open them in new windows/tabs each time he/she has to do an extra click. This is just an example. It all depends what the user wants.....
We've had an interesting request from a client. They'd like their users to have two windows/ tabs open (one content, one form) which the user switches between.
Parts of the content (which is large) relate to parts of the form (which is also large).
So they'd like the following:
www.example.com/content.html#info1 links to www.example.com/form.html#question1
www.example.com/content.html#info2 links to www.example.com/form.html#question2
www.example.com/content.html#info3 links to www.example.com/form.html#question3
etc. etc.
The problem is if a user links from the content to the form - and then goes back to the content - any other links on content.html will either open another window/tab (if no target reference is used) or if a target reference is used form.html will be reloaded losing form data.
The ideal situation follows:
The user is looking at content.html and clicks a link
Another window or tab opens showing form.html
The user fills in that part of the form and goes back to content.html
The user clicks another link on content.html
The window or tab showing form.html scrolls to the correct anchor point.
I'm not even sure if this is possible but I'm interested in people's thoughts on this problem.
This can be done with basic JS - but rather than writing out the event handlers to listen for that - I just simplified the concept here:
http://jsfiddle.net/fMfgk/
The key is in the name parameter of window.open - keep that the same and you can keep referencing the same window.