基本href网址中断<a href>了fancybox的锚点</a>

Question

我写了一些程序，单击链接即可打开。

<a class="myclass" href="#openfancybox">Open Fancybox</a>

它使用fancybox，jQuery和一切正常运行。 一旦将其实施到项目中，它将无法正常工作。 问题是项目中的以下代码：

<base href="http://somesite.com/" />

它转到基本URL，而不是打开fancybox。

我试图使用jQuery或javascript解决方案对其进行修复，但我没有运气。

PS我不想从源代码中删除base ，因为它可能会破坏项目中的其他内容（我有一个任务仅实现我的fancybox）。

PPS另外，只要我在fancybox上使用jQuery，我肯定会喜欢纯JavaScript的解决方案，但预计会与其他框架发生冲突。 该项目适用于Joomla。

Answer 1

如果您使用base标签和fancybox或在本演示中看到的任何东西，绝对没有冲突...，并且也不需要其他的javascript / jQuery来破解或修复（先前建议的）（不存在的）问题。

但是，我认为您清楚地了解到base标记将影响所有相对路径，包括锚点<a>标记以及<link> ， <script>和/或<img />标记。 换句话说，任何使用href和/或src属性的标签。

话虽如此，请考虑这种情况：

假设您有一个页面test.html ，该页面位于名为sandobox的子目录中。 该页面的完整路径为http://somesite.com/sandbox/test.html ，对吗？

现在，假设您正在使用类似的相对路径从test.html中加载fancybox：

<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css" />
<script type="text/javascript" src="fancybox/jquery.fancybox.js"></script>

...相当于使用以下绝对路径：

分别为http://somesite.com/sandbox/fancybox/jquery.fancybox.css和http://somesite.com/sandbox/fancybox/jquery.fancybox.js 。

现在，如果您决定添加这样的base标记：

<base href="http://somesite.com/" />

...您的所有相对路径，包括对fancybox文件的调用，都将转换为：

http://somesite.com/fancybox/jquery.fancybox.css和http://somesite.com/fancybox/jquery.fancybox.js 。

由于fancybox文件实际上位于sandbox目录下，因此您的文档将无法加载它们（由于base标签），因此fancybox的实现将失败。

要解决冲突，您可以执行以下操作：

• 在<link>和<script>标记中使用绝对路径，或者
• 根据base路径重定位文件。

选中有关base标记的好问题/答案， 是否建议使用<base> html标记？

Answer 2

如果仍然有人对此发生。 将base href与fancybox一起使用实际上存在冲突。

Fancybox中有一个检查项，它查看单击的元素的href并检查#符号，以及是否发现它将类型设置为内联。

https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js#L303

这可以在不使用<base href>情况下很好地工作，但是如果您使用<base href> ，则href属性将返回带有散列的完整url，因此查找href.charAt(0) === '#'将失败，因为第一次聊天不再是# ，而是可能是h。

也许不用检查charAt(0) === '#' ，而应该只是寻找#并进行分割。