jamsraka.blogg.se

Either example above would already solve the accessibility problems because the “href” attribute contains the actual link destination.

For now, we’re not interested in the actual JavaScript implementation, we’re just trying to define the best HTML code. If you were hoping to see some kickass JavaScript, hold on. (You can always use a JavaScript redirect in that page.) Keep in mind that the URL that will open for users who manually launch the link in a new window will be the one specified in the “href” attribute, not the one passed via script. The former example is still useful when you want to provide a separate URL for users without JavaScript. We can avoid redundancy by passing the element to the function and having it read the URL from the “href” attribute: pop me up You’ll notice that both problems stem from the same mistake: they specify something that’s not the link’s destination as the link’s destination.Ī better approach would be to specify the link’s destination correctly in the “href” attribute, and use an event handler (which is where you place JavaScript code) to open the new window and set its special properties. In other words, when you open a new window and it tries to run that JavaScript function, it will fail because the new window has never heard of that JavaScript function. If JavaScript is enabled, however, the browser will call the pop-up function within the scope of the new window’s location bar - and it’ll fail, because the function only exists within the scope of the original page. If JavaScript is disabled, we reach the same issue described before. When I intentionally open a link in a new tab or window, here’s a simplified description of what the browser does: it grabs the value specified in the link’s “href” attribute and it sets it as the location for the new tab or window. The second issue is not so obvious, but comes with its own interesting irony: the link will fail for the very people who concur with the designer’s decision: users who already planned to open the link in a new window. Depressingly, the purpose of this function is to load the actual link destination. The reason why the link won’t load for these users is simple, and stupid: the link destination is set to an action (a JavaScript function), rather than to its actual destination. The first one should be clear: users without JavaScript are unable to follow the link. It sports two serious usability issues that would otherwise be easily avoidable. This piece of HTML is the root of all that’s unholy in the pop-up world. Here’s a representative sample: pop me up ConceptĪn identifier of the window where the resource should loadĬhrome/ UI properties of the target windowįirst, let’s put an end to the problem with most JavaScript pop-up links: their HTML. Below is a table describing these items and their equivalence between HTML and JavaScript. We’ll also use the “window.open” JavaScript method and refer to its arguments “url,” “name,” and “features”. We’ll be using here the HTML “a” element and dealing with its “href” and “target” attributes. The concepts here are very simple, but let’s get some terminology clear before we continue:

With pop-up links, JavaScript is used either because special window properties must be set, or because the DOCTYPE in place does not allow the “target” attribute.

Ordinarily, all you need for a link to open on a new window is to set its “target” attribute to “_blank”. 3 days of design, code, and content for web & UX designers & devs.įor the purposes of this article, pop-up links are links that open in a new window, and that rely on JavaScript to do so.