I'd like a hyperlink on a page to open its site's landing page, in a new tab if it's not already open, or, if it is already open to have the browser switch to that tab.
My idea for this was to use the target attribute but the problem is that the tab for the landing page doesn't have a name that I can refer to.
So my question is, can a tab be named by the page loaded in it so that it can be referred to by the target attribute?
In general, no.
However, if you open a child "window" with JavaScript, you can retain a handle to that window and modify things that way.
In general, browsers control the behavior of how a link opens. Some default to open in the same viewport, others default to a new tab, and still others default to a new window entirely.
The best thing to do, however, is to not try to control this and instead allow the browser (and more importantly, the user) to decide how the clicked link should be opened. This allows your power users to control how they use your site, and at the same time keeps the behavior of the browser consistent for your users, which is a critical component in keeping your users happy.
Related
I am improving the accessibility of a website to make sure users can easily navigate using the keyboard only. There is a button that generates a file, but after clicking on the button, the generic browser download dialog appears at the bottom of the page, and the focus still stays on the button. Users with a screen reader are not notified about the dialog.
There is a way to focus on the dialog when it appears?
I am able to focus on elements of the page, but since the dialog is a browser feature, I have no idea how to do it!?
I will appreciate any guidance what can you give me. Thank you!
You do not have control to do this, plus this is expected behaviour and there is nothing you need to do.
Screen reader users will go out of the active screen using shortcut keys if they wish to access the file.
Other considerations as you said "button" in your question
You should not use a <button> element to generate a file. File downloads should always be a hyperlink (<a>).
If the document requires variables to be passed and you are able to pass them via a GET request then the hyperlink href should be the URL + GET parameters.
The advantage of this for everyone is that they can middle click to open the document in a new window (or right click and choose "open in new window" etc.), plus it works without JavaScript and is easily indexed by Search Engines.
Also adding the download attribute to a hyperlink has some advantages, especially as in some screen readers it gets signalled to users that this link will download a document.
When creating a download link you should state the document type (pdf, word etc.) and document size for accessibility. You can do this with visually hidden text if your design does not allow for it.
I have written a reasonably in-depth answer on how to add the file size and file type info for screen readers here. About 70% of it is relevant to you.
(I am developing a Node.js/Express web application.)
Is there a way to identify a tab and have its identifier saved locally in the browser so that the identifier is persistent across different pages of the same web site?
Example, my web application is opened by the user in two tabs of the same browser. I would like to know that they are opened in different tabs. Even if the user in tab A presses F5 to refresh the page, I (in the client Javascript) would like to know that the page is still in tab A.
Is there a property of window or another object in the DOM that identifies the browser tab?
Nothing simple. However, there are two interesting technologies that may help you solve your problem.
sessionStorage is the closest to what you described. It gives each tab a different Storage object that you can store random IDs in. It doesn't quite work though, because when you open a link in a new tab the second tab gets a copy of the parent page's sessionStorage object, including whatever you stored in the parent page's sessionStorage.
The storage event is probably what you want to use. You can have your tabs communicate directly with each other to coordinate unique IDs or detect multiple tabs being open. See this question which is focused on how to communicate across tabs in javascript.
Some combination of these two technologies will probably help you solve whatever you are trying to accomplish.
I am developing a web site where users can change settings which they have to confirm before taking effect.
The confirmation is done by a link I send them via E-Mail. In the HTML of the website I use this little snippet:
<script type="text/javascript">window.name="mysite";</script>
And in the HTML emails I use
Click me
But Chrome is always opening new tabs instead of opening them all in one.
Is this even possible or is it forbidden for some reasons?
Webmail platforms such as Gmail tend to modify some of the HTML code of an email due to security reasons.
They obviously remove any javascript code the email could have. But they also change (or add if none) the target property of every anchor element and set them to target="_blank" in order to avoid the user to be taken out of Gmail (in this case).
Unfortunately every webmail platform has their own behavior, therefore, what you want to do is not gonna work on every webmail platform.
If what you want to do is prevent the user from having multiple tabs of the same page opened, (*please refer to Update 1) it comes to mind you could use web sockets to close the previous tab once the user enters in the URL sent by email. Have a look at socket.io for example.
Update 1
There's no way to do this using WebSockets. There's no possible way to close a window that wasn't opened using javascript, and it can only be closed by it's parents.
That is a very interesting idea. I like it. Alas, it appears that, in modern browsers, you can no longer close a window you didn't open through javascript. So if you aren't allowed to run javascript in the email, the best you can do is to redirect the original page to a "thank you" page and leave it hanging around in the browser's tab (but no longer waiting on conformation). Like this:
PleaseConfirm.html:
window.name="need_redirected";
Confirm.html:
var w = window.open("", "need_redirected");
if (w)
w.location="ThankYou.html";
Of course, for old IE, I'd still try to close the old window in ThankYou.html:
window.top.close();
You can still try to set the target, of course, just in case it works, and you can always try putting an onclick attribute on your tag for the same reason:
click here
But that seems to be the best you can do. Bummer.
Neither of the other two answers work, but this one probably will:
In the initial tab, listen for an onstorage event, with a certain key being created, e.g. "userHasConfirmedEmail". When the event occurs, window.top.close().
In the new tab, create that key.
Credit goes to Tomas and his answer.
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.....
Every solution I've seen so far for opening a new browser window uses the target property in to set it to "_blank". This is frustrating because in some browsers it only opens a new tab AND combine that with the auto-resizing behvaiour at http://www.facebook.com/connect/prompt_feed.php?&message=test, it basically mangles my browser whenever I try updating my status from my site.
How can I be sure to open a new window when a user clicks on a link?
Thanks!
Trindaz on Fedang
Popups are windows, they just have some features disables. You can make a popup act like a regular window by enabling these features. For example, if you open a popup with
window.open('url', 'name', 'width=500, height=500, status=1, toolbar=1, location=1, menubar=1, resizable=1');
the window will have a toolbar, a URL bar, a status bar, menus, and it will be resizable. It will the same as any other window.
Keep in mind, however, that many browsers block window.open() under some conditions, and some of them will open new tabs if you specify a lot of features. Some are weird about it too; Chrome, for example, uses scroll bars on popups by default, but if you specifically tell it to use scroll bars in a popup (using scrollbars=1), it will open in a tab instead.
So basically there is no way to be completely sure that your page will always open in a new window, because browsers all handle this stuff differently, users can change settings too. The code above is probably your best bet if you have to have a new window, but you might want to look into other options.
window.open(URL,name,specs,replace)
function newwindow()
{
myWindow=window.open('','','width=300,height=300');
myWindow.document.write("<p>This should open in a popup</p>");
myWindow.focus();
}
There is a legitimate reason for using Target=_blank that everybody has completely overlooked, and that is when a website is written as a BOOK with chapters/pages and the Table of Contents must remain intact without using the BACK button to reload the previous page (Table of Contents). This way all a surfer needs to do is close the Target Page when finished reading and they will be back to the Table of Contents.
Lucky for us that HTML5 has reinstated the Target="_blank" code, but unfortunately the "Block Popups" must be unchecked for it to work.