javascript - 您将如何解决 Firefox 81 中可能的回归问题，即使用“target='_blank'”破坏“javascript:” URL？

Question

我有一个网站，其中主页有一个锚链接一个javascript:URL，该 URL 应该在新选项卡中打开，而该 URL 又应该打开一个mailto:URL，该 URL 应该打开一个电子邮件客户端的选择，或者直接打开默认邮件客户端。然而，链接没有被解析和处理。在 Firefox 80、81、82、83 以及更早或更高的版本中，没有导航到该链接。在 Microsoft Edge 和旧版本的 Firefox（例如 70.0）上按预期工作。可能也可以在 Chrome 中使用，未经测试。Firefox 有没有不破坏跨浏览器支持的解决方法？

我使用的是javascript:URL 而不是mailto:直接使用地址，因为需要对电子邮件地址进行模糊处理以防止电子邮件被收集。

我已经能够将代码减少到以下内容，这应该会弹出一个警告框：

<a href="javascript:alert('Hello!')" target="_blank">Link</a>

注意：上面的简化示例并未显示整个原始要求。它只是展示了错误的性质。javascript:结合target="_blank", 是导致问题的原因。

链接到错误跟踪器

已经建议的解决方法是删除该target="_blank"属性。但是，这会导致在单击链接时替换原始（主页）页面，这是不可取的。因此，我不认为这是一个适当的解决方法，尽管可能总比没有好。

最初的实现已被更改为基于 PHP 的解决方案，它更加安全和健壮，并且可以解决该错误，因此我删除了不再适用于该问题的链接。

标签： javascripthtmlurlfirefoxbrowser

Answer 1

这些建议主要集中在打开一个javascript:URL，然后可能会打开一个mailto:URL，而不替换原始文档/页面。这些解决方案在 Windows 上使用 Firefox 81 进行了测试。

我尝试插入片段，但无法使链接正常工作，因此我改用代码示例。

方法 1A

<a href="javascript:open('mailto:[e-mail]','Send Email','width=1,height=1'),document.documentElement.outerHTML">Email Me!</a>

这仅供参考：它并不能完全解决这个错误，但它仍然是相关的。这是一个控制案例。将打开一个新的弹出窗口，然后打开mailto:地址，但将原始文档的内容替换为相同的内容。内容将被保留，但行为可能会中断。

方法 1B

<a href="javascript:open('mailto:[e-mail]','Send Email','width=1,height=1'),'<script>location.reload()</script>'">Email Me!</a>

不是解决方法：另一个控制案例。打开新窗口再打开mailto:地址后，会重新加载/刷新原页面。这将保留行为，但可能会重置当前状态。

方法二

<a href="javascript:open('javascript:location=\'mailto:[e-mail]\'','Send Email','width=1,height=1'),document.documentElement.outerHTML">Email Me!</a>

这是一种解决方法，可用于在javascript:不丢失所有原始页面内容的情况下打开 URL。

方法三

<a href="javascript:open('mailto:[e-mail]','_self','width=1,height=1'),document.documentElement.outerHTML">Email Me!</a>

这也不是该错误的解决方法，但演示了一种mailto:无需替换原始页面且无需打开 JavaScript 弹出窗口即可打开 URL 的方法。'_self' 选项表示将使用原始窗口。

方法一：iframe

<a href="javascript:document.getElementById('i').src='mailto:[e-mail]',document.documentElement.outerHTML">Email Me!</a>
<iframe id="i" style="width:0;height:0;visibility:hidden"></iframe>

可以看出，这需要一个隐藏的 iframe 元素。这也可以不使用javascript:URI 而是使用单击 (onclick) 事件处理程序来完成。

<a href="#" onclick="document.getElementById('i').src='mailto:[e-mail]',document.documentElement.outerHTML;event.preventDefault()">Email Me!</a>
<iframe id="i" style="width:0;height:0;visibility:hidden"></iframe>

您还可以使用该addEventLister()功能附加事件。

方法 B：iframe

<a href="javascript:document.getElementById('i').src='javascript:location=\'mailto:[e-mail]\'',document.documentElement.outerHTML">Email Me!</a>
<iframe id="i" style="width:0;height:0;visibility:hidden"></iframe>

同样，可以使用单击事件处理程序。

方法四

<a href="javascript:open('javascript:location=\'mailto:[e-mail]\'','_self','width=1,height=1'),document.documentElement.outerHTML">Email Me!</a>

奇怪的是，它只有在调用上述 iframe 方法后才有效，需要进一步研究。

这不是一个详尽的清单。此外，还有一些数据：URI 替代品。数据 URI 被阻止在现代浏览器的顶层打开。它们确实在弹出窗口和 iframe 中工作。

您可以混合和匹配其中一些解决方案中的元素，以获得适合您特定要求的解决方案...