Blog Documentation Book a Demo
Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

External links embedded in discussions and comments to open in a new window when clicked?

ramyhinramyhin
edited January 2011 in Vanilla 2.0 - 2.8
How can I get external links embedded in discussions and comments to open in new windows (preferably a new tab) when clicked?
Tagged:

Comments

  • ShadowdareShadowdare MVP
    edited January 2011
    For the standard comment form, it should do it automatically if you just paste the link in. Otherwise, you just add a target like this:
    <a href="YOURLINK" target="_blank">YOURLINK</a>

    This also reminds me, @Mark, the Powered By Vanilla text should open up in a new window preferably.

    Add Pages to Vanilla with the Basic Pages app

  • ramyhinramyhin
    edited January 2011
    Do I just add this line of text somewhere in the default.master.php file?

    My goal would be to have all links posted in any discussion to open in a new window when clicked.

    It appears that the forum on http://vanillaforums.org/discussions does this.
  • ShadowdareShadowdare MVP
    It does it for me by just copy and pasting the link. Are you using the CLEditor WYSIWYG plugin by any chance?

    Add Pages to Vanilla with the Basic Pages app

  • morozmoroz

    I'm using CLEditor and have embed forum. Target "_blank" is something i need. Please, who know how to add this to CLEditor???

  • sherrierohdesherrierohde New

    Having this same problem with CLEditor. Any solutions?

  • rahulparekhrahulparekh New

    Using JavaScript, this can be done.

    stackoverflow.com/questions/7901679/jquery-add-target-blank-for-outgoing-link

  • mconigliomconiglio New

    Just for the edification of noobs like me: I made a mod based on the stackoverflow post above, but thought I would add some detail in case others find it useful. (And please, if I'm not getting it right, please correct me. I'm a good C++ programmer but jQuery is pretty foreign to me.)

    My forum is embedded in an iFrame in my main site -- http://troikatronix.com/community. (I take it from other posts I've searched on this topic that embedding in an iFrame is not always looked upon kindly... but well, there it is.)

    I had two problems

    1) Full links with the "_blank" attributes opened inside the iFrame.
    2) Clickable links (i.e., text that had an href added using CLEditor) would not open at all. This seems to be due to anti-clickjacking limitations of the frame in WordPress. (The WordPress site seems to use the SAMEORIGIN version of the X-Frame Options -- see http://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options)

    So, not knowing a better place to do it, I added the jQuery statement below to 'global.js' in the 'js' folder at the root level of the forum.

    $('div.Message a').attr('target','_blank');

    (Note: The added line was placed just after "jQuery(document).ready(function($) {")

    As explained in the stackoverflow post, this searches for all tags inside forum posts and adds the "_blank" attribute to them. It only affects the links inside forum posts because of the 'div.Message' part of the selector.)

    Now, this isn't perfect because links to my own site also open in a new window. But it overcomes the X-Frame Options limitation and ensures that links my users add to external sites always open in a new window, to ensure there is no confusion that they are part of my site.

    I'm get the impression that there is quite a bit of debate about opening new windows when a user clicks on a link. But, for my case, it feels important that I ensure that it is super clear that these external links are not part of my site and not directly associated with to my product.

    Maybe some of you have ideas about how to improve the jQuery so that links to my own site don't open in a new window. But I could never get the "http" comparisons in the stackoverflow example to work. (I of course replaced the example site name [gusdecool.com] with troikatronix.com.) I made several other versions with my limited knowledge, but to no avail.

    I look forward to your critique and enhancements.

    Cheers,
    Mark

  • peregrineperegrine MVP
    edited June 2013

    http://vanillaforums.org/discussion/21554/github-1436-suggestion-to-make-links-consistent-when-using-buttonbar

    you could easily add this to the cleditor js.

    It works "perfectly" .

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder MVP
    edited June 2013

    You can add js in a widget on WP, this might work for you , just make the whole

    jQuery(document).ready(function($)

    $('iframe#vanilla46711 div.Message a').attr('target','_blank');

    between script tags. You might need to change the Vanilla iframe id to match yours, or add this to the one you put in. It helps to specify what message a you want to act upon.

    by the same token you can counteract this by adding

    $('#Menu a').attr('target','_self');

    or whatever you want to make open in the same window.

    ❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌

Sign In or Register to comment.