为什么我的链接无法点击？

Question

我正在创建一个程序，用于确定Twitchtv用户当前是否正在流式传输，并提供指向其页面的链接。流媒体部分很好，但点击他们的名字没有任何反应。我可以告诉它这是一个有效的URL，因为如果您将超链接拖动到空选项卡，页面会出现，但它仍然无法点击。我真的很困惑，因为我已经做了类似的项目，链接可以点击而没有问题。代码如下，任何帮助表示赞赏。

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.");
    });
})

Answer 1

Twitch.tv发送X-Frame-Options标头值为SAMEORIGIN。

由于CodePen / JSFiddle在iframe中显示您的测试代码，因此单击该链接会失败，因为它试图在同一iframe中加载链接。 Twitch的服务器阻止它运行。

这里的解决方案是a）通过adding a target attribute of _blank or _top to the generated link将链接打开为新窗口或b）在CodePen / JSFiddle之外进行开发。它与str.link无关，通过查看浏览器控制台可以轻松调试 - 在使用JS时，始终应该是您迈出的第一步。