jQtouch中的外部链接无法打开

Question

我正在使用jQtouch编写一个文档管理的Web应用程序，并制作了一个“热门搜索”部分。你可以在http://dl.dropbox.com/u/97184921/Project/index.html中查看整个内容。

下面的代码应该显示一个无序列表（它确实这样做了），其中包含两个项目 - 一个链接到Google，另一个链接到BBC作为测试网站。它们都应该有缩略图并显示出来，但当单击链接时，似乎并没有将用户发送到Google或BBC。是否有人可以帮忙解决？

        <li><a href = "http://www.google.co.uk/"><img height = "20" width = "20" src = "images/search.png">google</a></li>
        <li><a href = "http://www.bbc.co.uk/"><img height = "20" width = "20" src = "images/search.png">bbc</a></li>

- user1703470

---

@MichalKlouda说：“图像被定义为空，它们会自动关闭。” - Quentin

@Michal Klouda，你没有关闭图像标签，你以前编写过HTML吗？ - Michał Miszczyszyn

@Miszy 我打开了链接，但在我的 Nightly 上无法工作，刚刚切换到 Canary 就可以了。总之，我建议 OP 为下一个问题制作一个 SSCCE，这样通常可以更快地获得更好的答案。 - Fabrício Matté

这是一个好建议。只是有太多人在阅读代码之前就发布答案了... - Michał Miszczyszyn

在SO上，@Miszy链接整个网站以展示问题并不是最佳实践。应尽可能避免出现“代码墙”效应。另一个问题是这将使未来的其他用户无法使用该问题（因此使它们“过于局部化”）。 - Denys Séguret

Answer 1

在jqtouch网站上，他们建议在打开外部链接时使用target="_blank"。

如果您想在同一窗口中打开链接，请尝试rel="external" 来源 更好的来源，提供更多信息。

- davehale23

---

OP在哪里谈论JQTouch？ - Bojangles

@JamWaffles，他没有在任何地方使用它。在你发表评论之前先打开链接。http://code.google.com/p/jqtouch/issues/detail?id=9 - Michał Miszczyszyn

@Miszy 我不喜欢点开随机的 Dropbox 链接，但是没错，你说得对。如果提问者标记了他们的问题为 [tag:jqtouch] 或者明确说明他们正在使用 jqtouch，那么他们会帮助自己很多。 - Bojangles

非常感谢帮我设置target="_blank"，但是这会在新窗口中打开链接，我希望它在同一窗口中打开。 - user1703470

Answer 2

<li><a href = "http://www.google.co.uk/" target="_blank"><img height = "20" width = "20" src = "images/search.png">google</a></li>
<li><a href = "http://www.bbc.co.uk/" target="_blank"><img height = "20" width = "20" src = "images/search.png">bbc</a></li>

在锚标签中的target="_blank"会打开一个新页面（或选项卡），而不是在当前浏览器窗口中打开。这是最好的方法，因为用户不必离开您的网站，并且如果用户想返回您的网站，则不必处理缓存问题。

http://jsfiddle.net/UCnY3/

如果你使用谷歌浏览器的开发者工具来显示错误信息，你会看到以下内容:

"Refused to display document because display forbidden by X-Frame-Options."

在这里可以找到更多关于X-Frame-Options的信息:

https://developer.mozilla.org/en-US/docs/The_X-FRAME-OPTIONS_response_header

X-Frame-Options有两个可能的取值：

DENY无论站点如何尝试，页面都不能在框架中显示。

SAMEORIGIN页面只能在与页面本身相同的源上展示。

换句话说，如果您指定DENY，当从其他站点加载页面时，尝试将页面加载到框架中不仅会失败，而且在从相同站点加载时也会失败。另一方面，如果您指定SAMEORIGIN，则仍然可以在框架中使用页面，只要包含它的站点与提供页面的站点相同。

- sksallaj

---

我没有看到其他人发的内容..他们在我回复之前就已经发了..我刚回答完，更多的人就已经看到了。谢谢你的评判..讽刺 - sksallaj

我没有阅读其他人发布的内容，这就是全部。 - Michał Miszczyszyn

没有人发帖时，我去看了问题，我回答后又出现了两个帖子。我在jsfiddler上进行了演示以证明我的观点，并查找了X-Frame的链接。 - sksallaj

@Miszy 这个回答可能有些多余，但我认为你太苛刻了：在没有阅读其他答案的情况下花时间构建答案是可以理解的。 - Denys Séguret

如果一开始就有答案的话，我本来会读其他答案的！在写完所有内容后，我花了一些时间才发布答案。当我意识到已经有人发布了答案时，为时已晚，于是我又添加了更多关于X-Frame选项的内容（甚至还没有人提到）。 - sksallaj

Answer 3

问题似乎是您的链接被JavaScript挂钩，而处理点击的脚本失败了。

如果您在FIreBug中查看JavaScript控制台，您会发现在单击链接后会出现以下错误：

OPTIONS http://www.google.co.uk/ 405 (不允许的方法) jquery.js:19 XMLHttpRequest无法加载http://www.google.co.uk/。来源http://dl.dropbox.com未被允许> Access-Control-Allow-Origin。

正如@davehale23所建议的那样，将target="_blank"添加到您的链接中将解决此问题（您可以通过在FireBug中调整其中一个链接元素来测试此操作）。

- Jon Egerton