bootstrap 语法错误:在'Element'上执行'querySelector'失败:'#div-2.1'不是一个有效的选择器,

hs1ihplo  于 6个月前  发布在  Bootstrap
关注(0)|答案(7)|浏览(86)

先决条件

描述问题

#35566 没有解决所有奇怪的ID的问题。下面的测试用例添加会导致问题标题中的错误。

简化的测试用例

diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index c7951e6..704b52a 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -341,11 +341,13 @@ describe('ScrollSpy', () => {
           '  <ul class="nav">',
           '    <li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>',
           '    <li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>',
+          '    <li class="nav-item"><a class="nav-link" id="a-2.1" href="#div-2.1">div 2</a></li>',
           '  </ul>',
           '</nav>',
           '<div class="content" style="overflow: auto; height: 50px">',
           '  <div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>',
           '  <div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>',
+          '  <div id="div-2.1" style="height: 200px; padding: 0; margin: 0">div 2.1</div>',
           '</div>'
         ].join('')

你在哪个操作系统上看到了这个问题?

macOS

你在哪个浏览器上看到了这个问题?

Firefox

你使用的Bootstrap版本是什么?

v5.2.3

qxgroojn

qxgroojn1#

这是奇怪的...
我没有花时间去查看,但如果我在Firefox的JS控制台中复制粘贴:

const parseSelector = selector => {
   if (selector && window.CSS && window.CSS.escape) {
     // document.querySelector needs escaping to handle IDs (html5+) containing for instance /
     selector = selector.replaceAll(/#([^\s"#']+)/g, (match, id) => '#' + CSS.escape(id))
   }

   return selector
 }

然后我输入:

parseSelector("#div-2.1")
"#div-2\\.1"

=> 对我来说看起来是正确的结果

pb3s4cty

pb3s4cty2#

应用补丁并运行测试?这应该会重新创建问题(也许那个函数没有被调用?)

iq0todco

iq0todco3#

以下是我在使用上述补丁后遇到的测试失败:

Chrome Headless 109.0.5414.87 (Mac OS 10.15.7) ScrollSpy constructor should add the active class to the correct element FAILED
	SyntaxError: Failed to execute 'querySelector' on 'Element': '#div-2.1' is not a valid selector.
	error properties: Object({ code: 12, INDEX_SIZE_ERR: 1, DOMSTRING_SIZE_ERR: 2, HIERARCHY_REQUEST_ERR: 3, WRONG_DOCUMENT_ERR: 4, INVALID_CHARACTER_ERR: 5, NO_DATA_ALLOWED_ERR: 6, NO_MODIFICATION_ALLOWED_ERR: 7, NOT_FOUND_ERR: 8, NOT_SUPPORTED_ERR: 9, INUSE_ATTRIBUTE_ERR: 10, INVALID_STATE_ERR: 11, SYNTAX_ERR: 12, INVALID_MODIFICATION_ERR: 13, NAMESPACE_ERR: 14, INVALID_ACCESS_ERR: 15, VALIDATION_ERR: 16, TYPE_MISMATCH_ERR: 17, SECURITY_ERR: 18, NETWORK_ERR: 19, ABORT_ERR: 20, URL_MISMATCH_ERR: 21, QUOTA_EXCEEDED_ERR: 22, TIMEOUT_ERR: 23, INVALID_NODE_TYPE_ERR: 24, DATA_CLONE_ERR: 25 })
	    at Object.findOne (js/src/dom/selector-engine.js:41:44 <- js/tests/unit/scrollspy.spec.js:9260:46)
	    at ScrollSpy._initializeTargetsAndObservables (js/src/scrollspy.js:211:48 <- js/tests/unit/scrollspy.spec.js:15411:76)
	    at ScrollSpy.refresh (js/src/scrollspy.js:91:10 <- js/tests/unit/scrollspy.spec.js:15227:12)
	    at new ScrollSpy (js/src/scrollspy.js:73:10 <- js/tests/unit/scrollspy.spec.js:15207:12)
	    at js/tests/unit/scrollspy.spec.js:355:27 <- js/tests/unit/scrollspy.spec.js:15743:29
	    at new Promise (<anonymous>)
	    at UserContext.<anonymous> (js/tests/unit/scrollspy.spec.js:338:14 <- js/tests/unit/scrollspy.spec.js:15740:16)
	    at <Jasmine>
gudnpqoy

gudnpqoy4#

好的,我对 Bootstrap 代码不熟悉,但在我看来,scrollspy似乎使用了各种SelectorEngine函数(如find等),而这些函数似乎根本不调用parseSelector?

w8rqjzmb

w8rqjzmb5#

我遇到了类似的问题,但是链接到一个外部PDF文件,使用"file.pdf#page=10"的格式。

<a href="http://example.com/document.pdf#page=10" target="_blank" class="nav-link">External link</a>

我得到了JS错误:

Uncaught DOMException: Document.querySelector: '#page=10' is not a valid selector
ozxc1zmp

ozxc1zmp6#

我也在Bootstrap v5.2.3上遇到了这个问题,运行在Windows 11上的Microsoft Edge v112。

<h2 id="2-partition-normalized-cut">2-partition: Normalized Cut</h2>

导致了错误

Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#2-partition-normalized-cut' is not a valid selector.
    at Object.findOne (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:10283)
    at Be._initializeTargetsAndObservables (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:53059)
    at Be.refresh (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:51311)
    at new Be (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:51184)
    at Be.getOrCreateInstance (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:8552)
    at https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:54113
    at i (https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js:6:4608)

看起来 #34412 (本应由 #35566 关闭)实际上仍然没有解决。

bjp0bcyl

bjp0bcyl7#

可以在5.3.2上确认。
像这样修补SelectorEngine.findOne()可以解决(那部分的)scrollspy问题,对我和我的#2-foo-bar ID也是如此。(没有检查副作用!)

findOne(selector, element = document.documentElement) {
-      return Element.prototype.querySelector.call(element, selector);
+      return Element.prototype.querySelector.call(element, parseSelector(selector));
    },

相关问题