base href url breaks <a href> anchor for fancybox

Question

I've wrote some program that opens upon a link click.

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

It uses a fancybox, jQuery and everything works perfect. Once I implemented it into the project, it doesn't work. The problem is this code in the project:

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

It goes to the base url instead of opening a fancybox.

I've tried to fix it using jQuery or javascript solutions but I had no luck.

P.S. I don't want to remove base from the source code as it could break something else in the project (I have a task to implement my fancybox only).

P.P.S. Also I would definitely prefer a pure javascript solution as far as I use jQuery for my fancybox, but conflicts with other frameworks are expected. The project is for Joomla.

Answer 1

There is absolutely no conflict if you use a base tag and fancybox or whatsoever as you can see in this DEMO ...並且不需要額外的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文件實際上位於​​子目錄下，因此您的文檔將無法加載它們（因爲base標記），所以您的fancybox實現將失敗。

爲了解決衝突，你可以做兩種：

• 使用絕對在你<link>和<script>標籤或路徑
• 重新定位你的文件相對於base路徑。

檢查有關base標籤Is it recommended to use the <base> html tag?

Answer 2

如果有人在這仍然發生這個問題問得好/答案。實際上與使用fancybox來使用base href有衝突。

Fancybox中有一項檢查，查看點擊元素的href並檢查#符號，如果它發現它將類型設置爲內聯。

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

能正常工作，而無需使用<base href>，但如果你使用的是那麼href屬性將返回完整的URL與哈希值，使查找href.charAt(0) === '#'的檢查將失敗，因爲第一次聊天是沒有更長的#，但可能是h。

也許代替檢查charAt(0) === '#'它應該只是尋找一個#並做一個拆分。