将 css :target 选择器与 url 哈希参数组合以显示模态时出现问题

Question

我的javascript和css知识相当有限。我想我错过了一些关于何时以及如何应用 css 以及页面加载与异步 javascript 相结合的调用方式的微妙之处。

这是有效的：我有一个仅 css 的模态，当我的模态 (view( 的 id 与 url (#view( 中的哈希匹配时显示。我用它来显示图像(所有图像都是相同的模态div，实际的图像 src 是通过添加到模态锚点链接的事件侦听器更新的(。这工作正常。

这是有效的：我想扩展它，以便我可以通过提供 url 作为哈希参数直接链接到已经打开的弹出窗口。 即example.com/#view=imageUrl.仅打开它不会使 css 选择器:target匹配，因为它现在包含视图，但是如果我通过选中var hash = window.location.hash.substr(1);将其拆分，我可以将 url 与锚点分开，如果我随后使用：

window.history.pushState("", "", window.location.href.split('=')[0]);
updateModal(imageUrl)

其中，updateModal将图像的源设置为拆分的 URL。一切都很好，即网站打开时模式打开，网址中的图像在那里。

这是行不通的：现在我想，作为哈希参数提供的图像可能不再存在，所以我只想在提供有效图像的情况下显示模态，否则转到主页。我创建了一个虚拟图像元素，尝试从imageUrl加载图像，并将拆分和更新位移动到虚拟图像的 onload 方法，如下所示：

dummyImage.onload = function () {
window.history.pushState("", "", window.location.href.split('=')[0])
updateModal(imageUrl)
}

如果我这样做，模态不会显示。css 没有被应用，这是为什么？

我还尝试自己更改模态的可见性：

dummyImage.onload = function () {
window.history.pushState("", "", window.location.href.split('=')[0])
updateModal(imageUrl)
var myModal = document.getElementById('view')
myModal.style.display = 'flex'
myModal.style.visibility = 'visible'
}

这使得模态出现，但似乎添加了一种无法再被 css 覆盖的样式。具体来说，当我单击模态的关闭链接时，该链接只是在 url 更改#noname转到不同的锚点，css:target选择器应该不再匹配，但模态不再关闭。为什么 css 不再适用？

Answer 1

阅读下面的链接，我相信这是一个错误，并且在使用 pushState 更改 url 时，页面加载后不会重新评估 ：target 选择器。我将通过始终显示模态来解决此问题，就像问题中的第二个工作示例一样，并使用回退图像和消息来提醒用户该图像不再可用(我可以使用dummyImage.onerror触发此更新(。

• https://bugs.webkit.org/show_bug.cgi?id=83490
• https://css-tricks.com/on-target/
• https://github.com/ReactTraining/history/issues/503
• https://github.com/whatwg/html/issues/639

如果有人知道更好的解决方案或解决方法，我仍然有兴趣学习！