分享一个用于分享网页的小技巧

开发调优
1

有时候给别人分享网页时希望使用"标题+URL"的形式, 形如:

LINUX DO - 新的理想型社区
https://linux.do/

但是似乎firefox没有快捷复制这种格式的功能, 只能复制URL, 这样的话别人就不能一眼看出你分享的是什么东西

于是研究了一下, 发现可以通过在书签中执行js来实现

javascript:(async () => {
  let title = document.title;
  if (title.length > 50) title = title.slice(0, 50) + '...';
  const text = `${title}\n${location.href}`;
  await navigator.clipboard.writeText(text);

  const toast = Object.assign(document.createElement('div'), {
    textContent: '✓ 已复制分享链接',
  });

  toast.style = `
    position:fixed; left:16px; top:16px; z-index:2147483647;
    background:#323232; color:#fff; padding:10px 14px; border-radius:8px;
    font-size:14px; box-shadow:0 2px 8px rgba(0,0,0,.3);
    opacity:0; transition:opacity .2s ease;
  `;

  document.body.appendChild(toast);
  requestAnimationFrame(() => (toast.style.opacity = '1'));
  setTimeout(() => {
    toast.style.opacity = '0';
    toast.addEventListener('transitionend', () => toast.remove());
  }, 2800);
})();

(上面脚本除了按格式复制外, 还会显示一个复制成功的toast)

使用方法: 创建书签, 网址处填写上面的代码, 名称自己随便取(我使用了🔗📤, 生动形象), 然后将这个书签放进书签工具栏方便使用

15 个赞
看了两位大佬的书签快捷方式，我直接合二为一：快捷复制dom文本和标题+url
2

感谢分享

1 个赞
3

太强了，感谢分享

1 个赞
4

有点意思 :face_savoring_food:

1 个赞
5

感谢大佬 。

1 个赞
6

感谢大佬

1 个赞
7

搜索酱也可以

image
image796×527 42.3 KB

1 个赞
8

谢谢大佬

1 个赞
9

学到了:face_savoring_food:

1 个赞
10

有用，感谢捞分享

1 个赞
11

又学到了，感谢佬分享

1 个赞
12

学到了感谢

1 个赞
13

佬，请问这个咋用呢，能给指导一下吗~

1 个赞
14

chrome可以直接用这个插件

1 个赞
15

在 github 仓库导入这个引擎就可以了

1 个赞
16

好的，谢谢佬~

1 个赞