为什么我的链接不可点击？ [关闭]答案

【问题标题】：Why aren't my links clickable? [closed]为什么我的链接不可点击？ [关闭]
【发布时间】：2016-06-04 18:22:44
【问题描述】：

我正在制作一个程序来确定 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.");
    });
})

【问题讨论】：

什么是str.link？你需要给它添加一个href...
我在这里看不到任何链接...
我以为 String.prototype.link 来自黑暗的日子......
你在哪里测试了这段代码？如果你在 JSFiddle 上测试它（我在 jsfiddle.net/ha7dtrwa 上做过）它只会失败，因为 HTML 在一个框架内，并且 Twitch 发送一个防止框架的 X-Frame-Options 标头。
@eversomber 单击链接后检查您的浏览器控制台。你会发现它说类似Refused to display 'https://www.twitch.tv/freecodecamp' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.。

标签： javascript jquery html twitch

【解决方案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 中工作的第一步。

【讨论】：