【举例:浮墨笔记】将其它页面嵌入该论坛

@Ta 2023-03-01发布,2023-03-03修改 5695点击

2023-3-3:

共用论坛提供的某些静态资源
layer.js - 论坛已经存在(https://hu60.cn/tpl/jhin/js/layer/layer.js ),我就不用额外引入该资源了。

网页插件:浮墨笔记:

举个例子:flomo · 浮墨笔记 (flomoapp.com)

第一步,注册账号并登录;

第二步,导入插件即可。

导入网页插件:浮墨笔记(当前用户:5,总安装次数:10)
<script>
// 自定义要打开的页面。
V1_OPEN_WEB_URL = "https://v.flomoapp.com/mine"; 
// 自定义插件名称。
V1_OPEN_WEB_PLUGIN_NAME = "笔记"; 
// 自定义弹出层表头。
V1_OPEN_WEB_TABLE_NAME = "浮墨笔记"; 
// 自定义弹出层的窗体大小,参数支持数组(单位支持像素、百分比)和空字符串(即默认值'auto')
V1_OPEN_WEB_WINDOW_SIZE = ['90%','90%']; 
// 限定宽度,低于限定宽度,没有弹出层,而是在屏幕中间提示信息。(默认值0)
V1_OPEN_WEB_MIN_WINDOW_WIDTH = ""; 
// 自定义提示信息。
V1_OPEN_WEB_MSG = "浮墨笔记"; 
</script>
<link rel="stylesheet" href="api.webplug-file/15953_public_resources/open_web_style.css" />
<script src="api.webplug-file/15953_public_resources/v1_open_web.js"></script>

效果图:
fumo.png(311.84 KB)fumo1.jpg(336.12 KB)fumo2.jpg(372.61 KB)

2023-3-2:

​ 我 JavaScript 不太熟,让 AI 机器人帮写的。

​ 还用到了 layer.js - /*! layer-v3.5.1 Web 通用弹出层组件 MIT License */

​ 已经测试且运行正常!支持一键导入插件,插件导入之后,自行修改参数即可!在这里顺便教一个快捷键清除浏览器缓存的技巧:普通刷新F5 、清除缓存刷新CTRL + R 、清除缓存并硬刷新CTRL + SHIFT + R

​ 我只弄个3个,应该够用了的!目前没有v4

网页插件:弹窗v1:

版本号(V1、V2、...)并无迭代升级的意思,只是为了预防与其它插件(常量、函数名)命名冲突影响插件正常运行。
导入网页插件:弹窗v1(当前用户:5,总安装次数:10)
<script>
// 自定义要打开的页面。
V1_OPEN_WEB_URL = "https://tlip.cn/news.php"; 
// 自定义插件名称。
V1_OPEN_WEB_PLUGIN_NAME = "弹窗v1"; 
// 自定义弹出层表头。
V1_OPEN_WEB_TABLE_NAME = "每日新闻v1"; 
// 自定义弹出层的窗体大小,参数支持数组(单位支持像素、百分比)和空字符串(即默认值'auto')
V1_OPEN_WEB_WINDOW_SIZE = ['888px','90%']; 
// 限定宽度,低于限定宽度,没有弹出层,而是在屏幕中间提示信息。(默认值0)
V1_OPEN_WEB_MIN_WINDOW_WIDTH = 888; 
// 自定义提示信息。
V1_OPEN_WEB_MSG = "弹窗v1"; 
</script>
<link rel="stylesheet" href="api.webplug-file/15953_public_resources/open_web_style.css" />
<script src="api.webplug-file/15953_public_resources/v1_open_web.js"></script>

网页插件:弹窗v2:

导入网页插件:弹窗v2(当前用户:7,总安装次数:12)
<script>
// 自定义要打开的页面。
V2_OPEN_WEB_URL = "https://tlip.cn/news.php"; 
// 自定义插件名称。
V2_OPEN_WEB_PLUGIN_NAME = "弹窗v2"; 
// 自定义弹出层表头。
V2_OPEN_WEB_TABLE_NAME = "每日新闻v2"; 
// 自定义弹出层的窗体大小,参数支持数组(单位支持像素、百分比)和空字符串(即默认值'auto')
V2_OPEN_WEB_WINDOW_SIZE = ['888px','90%']; 
// 限定宽度,低于限定宽度,没有弹出层,而是在屏幕中间提示信息。(默认值0)
V2_OPEN_WEB_MIN_WINDOW_WIDTH = 888; 
// 自定义提示信息。
V2_OPEN_WEB_MSG = "弹窗v2"; 
</script>
<link rel="stylesheet" href="api.webplug-file/15953_public_resources/open_web_style.css" />
<script src="api.webplug-file/15953_public_resources/v2_open_web.js"></script>

网页插件:弹窗v3:

导入网页插件:弹窗v3(当前用户:1,总安装次数:2)
<script>
// 自定义要打开的页面。
V3_OPEN_WEB_URL = "https://tlip.cn/news.php"; 
// 自定义插件名称。
V3_OPEN_WEB_PLUGIN_NAME = "弹窗v3"; 
// 自定义弹出层表头。
V3_OPEN_WEB_TABLE_NAME = "每日新闻v3"; 
// 自定义弹出层的窗体大小,参数支持数组(单位支持像素、百分比)和空字符串(即默认值'auto')
V3_OPEN_WEB_WINDOW_SIZE = ['888px','90%']; 
// 限定宽度,低于限定宽度,没有弹出层,而是在屏幕中间提示信息。(默认值0)
V3_OPEN_WEB_MIN_WINDOW_WIDTH = 888; 
// 自定义提示信息。
V3_OPEN_WEB_MSG = "弹窗v3"; 
</script>
<link rel="stylesheet" href="api.webplug-file/15953_public_resources/open_web_style.css" />
<script src="api.webplug-file/15953_public_resources/v3_open_web.js"></script>

JavaScript源码(弹窗v1):

// 创建事件容器
$(function() {
  // init
  const PLUGIN_NAME = !V1_OPEN_WEB_PLUGIN_NAME ? "弹窗v1" : V1_OPEN_WEB_PLUGIN_NAME.trim(); // 支持定义插件名称
  
  $('.bar').append('| <a onclick="initOpenWebV1()">' + PLUGIN_NAME + '</a>');
})

/*! main() 
* 针对某些被打开的页面出现响应式 样式不兼容的问题,提供个缓解策略就是限制窗口最小宽度,低于限定宽度则不弹窗。
*/
function initOpenWebV1() {
  // init
  const MIN_WINDOW_WIDTH = !V1_OPEN_WEB_MIN_WINDOW_WIDTH ? 0 : V1_OPEN_WEB_MIN_WINDOW_WIDTH; // 限定宽度
  
  if (window.innerWidth < MIN_WINDOW_WIDTH) {
    showMessageOpenWebV1(); // => 显示信息
  } else {
    openPopupOpenWebV1(); // => 打开弹出层
  }
}

// 创建信息容器的函数
function createMessageContainerOpenWebV1(message) {
  const messageContainer = document.createElement('div'); // 创建提示信息容器
  messageContainer.className = 'message'; // 添加样式
  messageContainer.innerHTML = message; // 设置提示信息
  return messageContainer; // 返回提示信息容器
}

// 删除提示信息容器的函数
function deleteMessageContainerOpenWebV1(messageContainer, delay) {
  // 设置定时器,在延迟时间后执行回调函数
  setTimeout(() => {
    document.body.removeChild(messageContainer); // 从文档中移除信息容器
  }, delay);
}

// 显示信息
function showMessageOpenWebV1() {
  // init
  const DEFAULT_MSG = '不兼容小屏幕哟!'; // (默认)提示信息
  const MSG = !V1_OPEN_WEB_MSG ? DEFAULT_MSG : V1_OPEN_WEB_MSG.trim(); // 支持定义提示信息
  const DELAY_TIME = 1000; // 定义提示信息延迟多少毫秒后消失
  
  const messageContainer = createMessageContainerOpenWebV1(MSG); // => 创建信息容器
  document.body.appendChild(messageContainer); // 将信息容器添加到文档中
  deleteMessageContainerOpenWebV1(messageContainer, DELAY_TIME); // => 删除信息容器
}

// 打开弹出层
function openPopupOpenWebV1() {
  // init
  const URL = !V1_OPEN_WEB_URL ? 'https://tlip.cn/news.php' : V1_OPEN_WEB_URL.trim(); // 支持定义要打开的页面
  const TABLE_NAME = V1_OPEN_WEB_TABLE_NAME.trim(); // 支持定义弹出层表头
  const WINDOW_SIZE = !V1_OPEN_WEB_WINDOW_SIZE ? 'auto' : V1_OPEN_WEB_WINDOW_SIZE; // 支持定义弹出层的窗体大小
  
  layer.open({
    title: TABLE_NAME,
    maxmin: true,
    type: 2,
    area: WINDOW_SIZE,
    content: URL,
  });
}
回复列表(5|隐藏机器人聊天)
  • @Ta / 2023-03-01 / /
    如果同一个插件导入多次(全部启用),会存在(常量、函数)命名冲突问题!我搞这三个一样的插件出来 就单纯为了改名万一有人需要呢
  • hik
    @Ta / 2023-03-01 / /
    可惜layui官网已经关闭了,现在只有镜像网站,不过github gitee上还在更新,有点可惜,它对于非前端开发者来说很易学,但终究抵不过过历史车轮的碾压。Vue、React 等前端框架的兴起,以及 ES6、TypeScript 等新标准的普及,使得基于 jQuery 的 Layui 显得与时代格格不入,但在我看来,它仍然很棒。
  • @Ta / 2023-03-02 / /

    @hik,你不说我还不知道它居然还有镜像站,我去镜像站找了一篇关于弹层组件文档 - layui.layer的使用文档!弹层组件文档 - layui.layer

  • @Ta / 2023-03-02 / /

    layui我觉得像我这种临时需求前端页面美化啥的非常棒。所需要的功能都有。vue没用过。实在是不想学了。我们这种野路子自学的够用就行。能跑就是好用的程序
    小米8(白)

  • @Ta / 2023-03-16 / /

    这个页面跟一个开源项目非常相似:MEMOS
    iPhone13 PRO MAX 1T 国行远峰蓝 非海南免税版

添加新回复
回复需要登录