javascript - 基本 href url 破坏了 fancybox 的 anchor

Question

我编写了一些在单击链接时打开的程序。

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

它使用 fancybox、jQuery，一切都很完美。当我将其实现到项目中时，它不起作用。问题是项目中的这段代码:

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

它会转到基本网址，而不是打开一个 fancybox。

我尝试使用 jQuery 或 javascript 解决方案修复它，但没有成功。

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

P.P.S。另外，我肯定更喜欢纯 JavaScript 解决方案，因为我在 fancybox 中使用 jQuery，但预计会与其他框架发生冲突。该项目适用于 Joomla。

Answer 1

如果使用 base 绝对不会有冲突标签和 fancybox 或您在 this DEMO 中看到的任何内容 ...并且不需要额外的 javascript/jQuery 来破解或修复(不存在的)问题，如之前建议的那样。

但是，我想您清楚地了解 base标签将影响您的所有相对路径，包括您的 anchor <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 的好问题/答案标签Is it recommended to use the <base> html tag?