There’s no real reason to write this from scratch, as there are some good examples out there, such as the one from Karl Swedberg (Quick Tip: Dynamically add an icon for external links) and others. However, I wanted to try to mirror my earlier implementation exactly, which was a little different in that I used a CSS class to contain the icon reference and the spacing so that I could easily adjust over time, as needed.
So, first of all, I went and grabbed the jQuery code and put the .js file in a Document Library in my test site. Then I added a reference into my test page:
Next I grabbed Karl’s jQuery code and added it after the jQuery reference in my page. I made adjustments, as follows:
- Added a new CSS class (ExternalLink) rather than appending the icon directly in the DOM
- Made sure that the links that are marked are only within the main content table with id=MSO_ContentTable