基本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) === '#' ，而應該只是尋找#並進行分割。