自制悬浮框的脚本库(脚本猫)

wwwwwllllk

不知道怎么用的参考我这个脚本的使用方式

https://scriptcat.org/script-show-page/723

let options = {
    content: '剪切板内容',
    background: 'black',
    width: '200px',
    height: '200px',
    background: '#333',
    padding: '10px', // 内边距
    borderRadius: '5px', // 圆角半径
    boxShadow: '0 0 10px rgba(0, 0, 0, 0.3)', // 阴影效果
    zIndex: 9999,  // 设置层级的优先级
    draggable: true, // 支持拖动
    prohibitDragUrl: ['yuque.com'], // 哪些页面禁止拖动
    element: element，  // 增加内容
    position: { // 悬浮框位置
        top: '50px',
        left: '50px',
    }
}
FloatingFrameUI()(options)

当我们需要给悬浮框添加一些简单的标签元素也是支持的

var element = document.createElement('TextArea');
    element.style.height = '150px'
    element.innerHTML = '你好';
    let options = {
        content: '剪切板内容',
        background: 'black',
        element: element
  }
 FloatingFrameUI()(options)

其它没有提交的属性比如margin是不支持的，如果你需要，你可以把我库的代码复制出来然后自己新建一个库加上你要的东西，或者脚本下面评论，有时间我会改，但是我希望你描述清楚你为什么需要，这样可能我会有想要改的欲望。

为什么写这个

1. 有些对网页操作的js脚本没有页面，给我一种没有安全感的感觉，我不知道脚本有没有运行成功。
2. 对于一些快捷键操作的脚本，没有一个悬浮框我可能会忘记这个脚本的存在，我想要提高我的脚本的使用频率。
3. 当然了悬浮框还有哪些功能，我也不知道，我说可以做笔记，好像不太合适，笔记还得改脚本才能改悬浮框的内容，所以脚本是不适用这种情况的
4. 我自己用的过程中，就改了3个版本才满足我的日常使用，所以它对于其它人来说是极大可能是无法满足的。
5. 写库其实并不能，希望更多的人参与进来。
6. 为什么会突然改之前的脚本，是因为写的脚手架antd-design的样式把知乎的样式也改掉了，所以我想对支持页面使用我之前写的脚本。

cxxjackie

这个用法有点怪，看了一下代码，建议改成这样：

1. var FloatingFrameUI = function() {
   
2.     // ...
   
3.     return floatingBox;
   
4. }();

复制代码

你原来写法的问题是FloatingFrameUI成了工厂函数，每次调用都会生成新函数而非共用同一个，改成闭包除了共用函数，还可以实现私有变量，因为闭包内不会被外部访问到，最后调用起来也更方便：

1. FloatingFrameUI(options);

复制代码

wwwwwllllk

cxxjackie 发表于 2023-7-9 22:42
这个用法有点怪，看了一下代码，建议改成这样：

你原来写法的问题是FloatingFrameUI成了工厂函数，每次调 ...

看了半天我才反应过来，但是这样写默认引入就会触发这个函数。我写的不是很好，因为gpt写的然后自己手动改了bug,我那样写的话同时也支持生成多个悬浮框。

这是我的想法，大佬可以多提意见

cxxjackie

wwwwwllllk 发表于 2023-7-10 11:36
看了半天我才反应过来，但是这样写默认引入就会触发这个函数。我写的不是很好，因为gpt写的然后自己手动 ...

那样写也能多次调用啊，闭包是在引入时初始化一个封闭环境，返回的函数也只在调用时才触发：

1. var fn = function() {
   
2.     console.log('这里只执行一次。');
   
3.     const data = {
   
4.         foo: 123,
   
5.         bar: 321
   
6.     };
   
7.     function getData(key) {
   
8.         console.log(data[key]);
   
9.     }
   
10.     return getData;
    
11. }();
    
12. 
    
13. fn("foo");
    
14. fn("bar");

复制代码

wwwwwllllk

cxxjackie 发表于 2023-7-10 22:26
那样写也能多次调用啊，闭包是在引入时初始化一个封闭环境，返回的函数也只在调用时才触发：
...

懂了，又学到了!!!

琦玉

你好，大佬，能不能增加一个隐藏开关以方便调用

wwwwwllllk

琦玉 发表于 2023-7-19 15:21
你好，大佬，能不能增加一个隐藏开关以方便调用

代码很简单的，gg是否有兴趣看下代码，自己尝试加一下，后面我有空会加上的

琦玉

wwwwwllllk 发表于 2023-7-19 15:45
代码很简单的，gg是否有兴趣看下代码，自己尝试加一下，后面我有空会加上的 ...

大佬真看得起我，看是看懂一点，加是万万加不上的。

wwwwwllllk

琦玉 发表于 2023-7-19 17:21
大佬真看得起我，看是看懂一点，加是万万加不上的。

其实很简单的，真的有人用那个库，我还是很开心的，但是我最近烦心的事情太多了，我后面心情突然好了一定加上

琦玉

wwwwwllllk 发表于 2023-7-19 18:50
其实很简单的，真的有人用那个库，我还是很开心的，但是我最近烦心的事情太多了，我后面心情突然好了一定 ...

大佬，慢慢来就行了。