【举例：浮墨笔记】将其它页面嵌入该论坛 - 网页插件

2023-3-3：

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

网页插件：浮墨笔记：

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

第一步，注册账号并登录；

第二步，导入插件即可。

<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,
  });
}