创建书签脚本，实现网页悬浮窗拖拽功Neng

咱就是说前端开发有时候真的挺有意思的。尤其是一些小技巧，Neng让用户体验一下子提升不少。今天咱就来聊聊创建书签脚本，实现网页悬浮窗拖拽功Neng。听起来是不是有点高大上？其实呢，原理并不复杂。

hen多人第一次kan到书签脚本，会觉得它hen奇怪。实际上呢，它就是一段嵌入书签的 JavaScript 代码。你把它添加到浏览器书签栏后点击就Neng在当前页面执行特定的操作。就像一个快捷指令。

比如你想要快速打开某个网站，或者执行一些自定义的功Neng，就Ke以用书签脚本来实现。这种方式hen灵活，而且不需要安装插件。

说到书签脚本呢，经常会遇到一个问题：为什么百度不收录那些书签链接？ 简单来说呢，百度抓取页面内容时会遵循一定的规则。Ru果你的书签链接包含 JavaScript 代码或者动态生成的内容，百度可Neng无法正确解析和收录。

另外《内容安全策略》也可Neng会阻止某些脚本的执行和被收录。所以Ru果你希望你的书签链接被百度收录的话，Zui好避免使用复杂的 JavaScript 代码或者动态生成的内容。

要实现悬浮窗拖拽功Neng呢，主要涉及到鼠标位置的计算和元素的定位geng新。 核心代码大概如下：

javascript:=>{
  const IFRAME_URL='https://ruankaodaren.com'; //替换成你要打开的网址
  const WIDTH=300; //设置宽度
  const HEIGHT=200; //设置高度
  if) return; //避免重复创建
  const box=document.createElement;
  box.id='__mini_window__';
  Object.assign(box.style,{
    position:'fixed',
    right:'24px',
    bottom:'24px',
    width:WIDTH+'px',
    height:HEIGHT+'px',
    background:'#fff',
    borderRadius:'10px',
    boxShadow:' 10px 30px rgba', //Ke以调整阴影效果, rgba 的 A 值控制透明度, R G B 是红绿蓝值  ，A 是透明度  例如 rgba 表示完全透明的白色色块. 这里是白色背景并带有阴影效果的代码片段是 Javascript 代码片段是 Javascript 代码片段是 Javascript 代码片段是 Javascript 代码片段是 Javascript 代码片段是 Javascript代码代码代码代码代码代码代码代码片段是 Javascript 代码片段是 Javascript 代码片段是 Javascript代码代码代码的代码片} Object.assign; box.style.right = '24px'; box.style.bottom = '24px'; box.style.width = WIDTH + 'px'; box.style.height = HEIGHT + 'px'; box.style.background = '#fff'; box.style.borderRadius = '10px'; box.style.boxShadow = '10px 30px rgba';  //添加阴影效果 const header=document.createElement; Object .assign; const mkBtn=t=>{ const b=document . createElement b . innerText=t Object . assign return b }; const toggle=mkBtn,close=mkBtn; header . append; const iframe=document . createElement iframe . src=IFRAME_URL Object . assign border : '' }); box . append; let collapsed=false; toggle . onclick==>{ collapsed=!collapsed box . style . height=collapsed?'32px':HEIGHT+'px' toggle . innerText=collapsed?'+':'–'} close . onclick==>{box . remove} let dragging=false sx==>e._clientX sy==>e._clientY sl==>{r}; st==>{r}; let dragStartBox={},dragStartElement={} function startDrag{ dragStartBox={ ...dragStartBox } dragStartElement={ ...dragStartElement } } function endDrag{ dragStartBox={}; dragStartElement={}} function moveDrag{ if{ return } let e = e||window event;   let x = e._clientX - dragStartBox;   let y = e._clientY - dragStartBox;   box     //调整元素的坐标     //注意这里的位置需要根据你的实际情况进行调整   } document   ==>{ ifreturn     if)return      moveDrag     } document  ==>{ dragging     //停止拖动操作      endDrag } } function isInsideBox{ return ! && box