javascript - 如何使用书签通过电子邮件发送当前页面的链接而不覆盖选项卡的内容？

Question

我正在尝试创建一个 Chrome JavaScript 书签，它将打开我的电子邮件处理程序来撰写一封电子邮件，其正文包含指向当前页面的链接，主题是页面的标题。我发现this guidance ，建议在书签中使用以下代码:

javascript:document.location="mailto:?subject="+document.title+"&body="+escape(document.location);

这可行，但有一个恼人的行为，即用文字 mailto 链接位置替换当前选项卡的内容:

如何修改 JavaScript，以便小书签邮寄链接，但在浏览器中保留原始页面内容？

我尝试过:

1. 在 JavaScript 末尾添加 return false。这阻止了任何事情发生(甚至生成电子邮件)。

2. 在分号后添加 location.reload()，如下所示:

   javascript:document.location="mailto:?subject="+document.title+"&body="+escape(document.location); location.reload();
   

   重新加载页面，但没有生成电子邮件。

3. 在分号之前添加 location.reload()，如下所示

   javascript:document.location="mailto:?subject="+document.title+"&body="+escape(document.location) location.reload();
   

   什么也没做(没有重新加载页面或生成电子邮件)。

我不想为此使用扩展程序，因为:

1. 我发现显示/隐藏书签比在需要/不需要它们时处理显示/隐藏扩展图标更容易。

2. 我不想处理扩展程序的激活、允许隐身以及浏览器版本兼容性问题。

Answer 1

您可以使用 window.open()

不覆盖当前页面位置的明显解决方案是使用 window.open() .

javascript:void(window.open("mailto:?subject=" + encodeURIComponent(document.title) + "&body=" + encodeURIComponent(document.location)));

但是，这会创建一个需要关闭的空白选项卡，并且经常会遇到弹出窗口阻止的问题。在某些情况下，可以通过编程方式关闭此选项卡，但这取决于您的浏览器、某些浏览器设置、弹出窗口阻止程序扩展等。

清理器:使用 <iframe>

对于这种用途，使用<iframe>同样有效，而且不太容易出现问题。 。以下书签添加了 <iframe>到document.body结束使用 insertAdjacentHTML() 。添加<iframe>到该文档将导致mailto由您的浏览器评估的 URL。然后，浏览器将告诉您的电子邮件程序打开一个发送电子邮件窗口，以便您发送电子邮件。

javascript:(function(){var now=Date.now(); document.body.insertAdjacentHTML('beforeend', '<iframe id="iframe-to-delete-' + now + '" src="mailto:?subject=' + encodeURIComponent(document.title.trim()) + '&body=' + encodeURIComponent(document.location) + '" style="display: none !important"></iframe>'); setTimeout(() => document.getElementById('iframe-to-delete-'+now).remove(), 3000);})()

一旦您的电子邮件程序打开发送电子邮件对话框，书签就可以删除 <iframe> ，这应该使页面不受干扰。