-6

I'm making a program that determines whether or not a Twitchtv user is currently streaming, and that offers a link to their page. The streaming portion is going fine, but nothing happens upon clicking their name. I can tell that it's a valid URL, because the page comes up if you drag the hyperlink to an empty tab, but it's still not clickable. I'm really baffled because I've done similar projects where the links are clickable without issue. Code is below, any help is appreciated.

HTML:

<div>
    <section class='body'></section>
</div>

JavaScript:

$(document).ready(function() {
    var members = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"],
        body1 = $('.body'),
        str = members[3],
        result = str.link("https://www.twitch.tv/" + str);
    $.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp', function(data) {
        if (data.stream === null) {
            body1.append(result + ":" + "not currently streaming on Twitchtv.");
        }
        else body1.append(result + ":" + "currently streaming on Twitchtv.");
    });
})
SpYk3HH
  • 22,272
  • 11
  • 70
  • 81
eversomber
  • 31
  • 1
  • 6
  • 2
    what is str.link? you need to add an href to it... – omarjmh Jun 04 '16 at 18:26
  • 5
    I don't see any links here... – David Jun 04 '16 at 18:26
  • @JordanHendrix, [String.prototype.link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/link) – nem035 Jun 04 '16 at 18:31
  • 1
    I thought String.prototype.link was from the dark days... – gcampbell Jun 04 '16 at 18:40
  • @gcampbell https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/link – SpYk3HH Jun 04 '16 at 18:41
  • result = str.link("https://www.twitch.tv/" + str); I've used .link before and it's worked. – eversomber Jun 04 '16 at 18:42
  • 1
    Where did you test this code out? If you tested it on JSFiddle (I did at https://jsfiddle.net/ha7dtrwa/) it only fails because the HTML is inside a frame, and Twitch sends an `X-Frame-Options` header that prevents framing. – ceejayoz Jun 04 '16 at 18:44
  • @ceejayoz I've been using Codepen. That's also where I've had .link work on a previous project. – eversomber Jun 04 '16 at 18:46
  • 1
    @eversomber Check your browser console after clicking the link. You'll find it says something like `Refused to display 'https://www.twitch.tv/freecodecamp' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.`. – ceejayoz Jun 04 '16 at 18:48
  • @SpYk3HH oops, I was getting mixed up with [these](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#HTML_wrapper_methods). – gcampbell Jun 04 '16 at 19:05
  • @gcampbell I don't blame you. Been doing webdev since the late 1990s and never saw `Str.link()`. – ceejayoz Jun 04 '16 at 19:09

1 Answers1

3

Twitch.tv sends a X-Frame-Options header value of SAMEORIGIN.

Because CodePen / JSFiddle show your test code in an iframe, clicking the link fails because it's attempting to load the link within that same iframe. Twitch's server prevents that from functioning.

The solution here is a) make the link open as a new window by adding a target attribute of _blank or _top to the generated link or b) do your development outside of CodePen/JSFiddle. It has nothing to do with str.link and is trivially debuggable by looking at your browser console - which should always be your very first step when working in JS.

Community
  • 1
  • 1
ceejayoz
  • 176,543
  • 40
  • 303
  • 368