how do i make a link open a new tab?

Frak_Lou_Elmo
Frak_Lou_Elmo
edited March 2022 in Campaign Portal Building

Sorry if this seems like a noob question that can be easily googled, but I cant get it to work.

 

I have some links at the bottom of my front page: https://gaximplague.obsidianportal.com/

For example the one that goes to Owlbear Rodeo, it was:

<a href="https://www.owlbear.rodeo/game/vfJl78b3I">[[File:1151463  | class=media-item-align-center | 200x200px | Owlbear Rodeo]]</a>"Whiteboard for battles":https://www.owlbear.rodeo/game/vfJl78b3I

Then I changed it to:

<a href="https://www.owlbear.rodeo/game/vfJl78b3I"; target="_blank">[[File:1151463  | class=media-item-align-center | 200x200px | Owlbear Rodeo]]</a>"Whiteboard for battles":https://www.owlbear.rodeo/game/vfJl78b3I</td>;

(edit: ignore the ; I see appearing here before the word 'target', i don't know why it appears after i post this comment as I certainly didnt type it) 

I thought the target="_blank" would do the trick but it is still opening in the same tab. what am I doing wrong?

Post edited by Frak_Lou_Elmo on



twitter: @Frak_Lou_Elmo

Comments

  • thaen
    thaen
    Posts: 1,064

    You're not doing anything wrong.  That would be exactly the way to do this ... if there wasn't a catch.  : )  The "_blank" target can be used to hack a visitor's computer, so OP removes it from the generated HTML after you click Save.  If you "inspect" the link that you've created, you'll see that the "target" attribute isn't there.

    But, we've got a new beta feature of Custom JavaScript that can make this work.  So, you could do this through a "class".  You would tag the url with a class of "target_blank" (for example).  Then you would add Custom JavaScript code of like this:


    $('.target_blank').attr("target", "_blank");

    Then any url in your campaign that had the "target_blank" class would be automatically given the "target=_blank" attribute ... and would open in a new window when the visitor clicked it.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    @Frak_Lou_Elmo, I just added you to the Custom JavaScript beta feature, so you can try this out now if you like.

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 174

    oh wow, thank you! I had to look this up and found out about "tabnapping", I guess that is what we are talking about here. I will try out your solution.



    In the source I read about tabnapping, it advised adding rel="noopener noreferrer" after target_"blank" to prevent this security breach. Wouldn't that help and bypass the need for custom javascript?



    twitter: @Frak_Lou_Elmo

  • thaen
    thaen
    Posts: 1,064

    Yes, it looks like adding noopener could fix this for most browsers. 

    https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener

    Actually it looks like most browsers  now implicitly add noopener for target _blank links ... though Opera is still a notable holdout according to this chart:

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#browser_compatibility

    I'll add "adding noopener" to the "todo list".  Thanks!

    Obsidian Portal Developer

  • rht
    Posts: 2 edited September 2022

    Hi @Thaen,



    sorry for the thread necromancy, but I've been battling this precise question for a while until it dawned on me to check if there was a forum here. 



    Please enter that "open in new tab" java phrase to make me understand correctly in an example from our forum?



     <li class='section Href Link'>

       <a href="https://cthulhuwiki.chaosium.com">;

          <span class='nav-icon op-icon-image-embed'></span><span class='nav-text' target=_blank  >Cthulhu Wiki</span>

        </a>

      </li>



     

    Post edited by rht on
  • thaen
    thaen
    Posts: 1,064

    @rht, no worries on necromancy ... always happy to see something raised from the dead if it's still an issue.

    This was actually on my short list of things to work on, so your post was just the nudge I needed to push it forward.

    The "target" attribute is now allowed everywhere.  If a page already had it in the Edit, you'll just need to Edit the page, and click Save (no changes needed), and then the system will generate the HTML again, this time with the "target" attribute in place.  And, as above, since Opera doesn't do this automatically, the system will also apply the rel noopener to any "a" tag with a "target" attribute.

    SO, in case that doesn't make sense ... you don't need the JavaScript phrase any more.  Just go forward using the target="_blank" attribute in your a tags, and your links will open in a new tab or window.

    @Frak_Lou_Elmo, just a heads up in case this thread is too old to notify you automatically.  : )

     

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 1,047

    Wait...we can open new tabs the NORMAL way now?

    Can someone give me the exact code for doing that? Please

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 174

    YEESSS!!!!! awesome sauce!



    twitter: @Frak_Lou_Elmo

  • rht
    Posts: 2

    @Thaen, thanks for your support.

    I am close to html illiterate, which shouldn't put a burden on you, but could you please specifically tell me why this doesn't work - 'cause it still opens in same tab.

    Can it be shaved down to something more precise?



     <li class='section Href Link'>

       <a href="https://drive.google.com/drive/folders/.......?usp=sharing">;

          <span class='nav-icon op-icon-image-embed'></span><span class='nav-text' target=_blank >Drive: Google drive</span>

        </a>

      </li>

  • thaen
    thaen
    Posts: 1,064 edited September 2022

    @rht, you're really close.  The "target" needs to go in the "a" tag, and the _blank needs to be in quotes ... like this ...


    &lt;li class='section Href Link'&gt;
      &lt;a href="your url goes here" target="_blank"&gt;
        &lt;span class='nav-icon op-icon-image-embed'&gt;&lt;/span&gt;
    &lt;span class='nav-text'&gt;Drive: Google drive&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;

     

    Post edited by thaen on

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    @Keryth987, the code would just be to add this to any "a" tag:

    target="_blank"

    So, for example:


    &lt;a href="your url goes here" target="_blank"&gt;Link Text&lt;/a&gt;

     

    Obsidian Portal Developer

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions