Tuesday, January 19, 2016

Forcing all links to open in a new tab

At my current work, we have a feature called custom pages. This feature provides a bare bones CMS for administrators to make custom page posts. We then display these posts inside an iframe. The iframe contents are served over https. However, users might publish links that serve up content over http. Unfortunately what will happen if a user tries to click the link in an evergreen browser is that the browser will block the link from navigating away. This effectively causes the iframe to display no content.

We were thinking of the best way to force all links to open in a new tab. We thought we had a few options:

  1. Modify all anchor tags to have a target="_blank" attribute
  2. Use an event handler to handle all click events on anchor tags to open a new tab
It turns out there is an even easier and more elegant option, the base tag. This tag has 2 attributes: href and target. The href attribute forces all anchor tags to use the specified value as the base url for all relative links. The target attribute forces all anchor tags to use that value for navigating. It's important to note that individual anchor tags can still override the value in the base tag.

So there you have it, force all links to open in a new window with a very simple html tag.

18 comments:

  1. Definitely an obscure one... don't think I've ever seen it used before. It seems mostly redundant and/or user-unfriendly, but an ingenious use to dig yourself out of iframe hell.

    ReplyDelete
    Replies
    1. It definitely doesn't have much of a use these days that I can think of, except this one.

      Delete



  2. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.
    Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.

    Best Cartoon Portrait Maker
    Caller id apps download
    Free Offline Fighting Games
    Free Call Recorder Apps

    ReplyDelete

  3. This is such an inspiration for the new bloggers out there (like me)! But I just wanted to come by and say I love your posts and the amount of effort you put into each one. Your blog layout is also SUPER cute. Keep up the amazing work. :)
    https://mypaperedit.com/blog/the-difference-between-abstract-and-introduction

    ReplyDelete
  4. Can’t find a reliable service to order your paper from. Check our https://scamfighter.net/review/essaybot.com on Scamfighter. Only real reviews based on personal experience and clients’ experience.

    ReplyDelete
  5. Such a great blog – bright and informative. Thank you for your opinion and helpful articles. https://speedypaper.com/reviews

    ReplyDelete
  6. I, allegedly, have to be necessitated to sense Crypto Bitcoin. What I presume is that I must have a prepossession about Crypto Bitcoin.

    Bitcoin Era


    http://wealthcode.over-blog.com/bitcoin-era-erfahrung


    https://www.facebook.com/bitcoinera.official/

    ReplyDelete
  7. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again.
    BCOM 2nd Year TimeTable 2020

    ReplyDelete
  8. Is it okay to buy a literature review? I have read a book but I do not have tome to write a review. I wonder what you think. I do not want to cheat at the meantime.

    ReplyDelete
  9. This is a very interesting blog. I like to spend time on interesting blogs. I found a person who can check my paper for plagiarism. I really like to study. With additional sources of information it's easy.

    ReplyDelete
  10. This site helps to clear your all query.
    This is really worth reading. nice informative article.
    vikram university bsc 3rd year result
    vikram university pg result

    ReplyDelete