# JSKit Hybrid

从 JSKit 1.5.0-b 开始我们提供了 JSKit Hybrid 项目类型支持。JSKit Hybrid 项目是一种网页扩展，除了可以使用 Web 浏览器的所有能力外，还可以在 H5 网页中调用 JSKit 提供的 jskh5 API，使用 JSKit 提供的原生能力。

# 项目结构

jskh5-project
  +
  |
  +-+ README.md
  |
  +-+ main.js
  |
  +-+ jskweb
      +
      +-+ index.html
      |
      +-+ userscript.js
      |
      +-+ gm-api.js

README.md 项目说明文件
main.js 项目主文件，运行在 JSKit 引擎中。
jskweb Web 文件夹，此文件夹下的文件都可在 JSKit Web 浏览器中通过 /jskweb/ + 文件名的方式使用。
index.html 模版中的 H5 首页，通过 hybrid 模块提供的 loadUrl('http://localhost/jskweb/index.html') 的方法加载。
userscript.js、gm-api.js 等 JS 文件，既可以正常的通过 Web 规范在 index.html 中加载，也可通过 hybrid 模块提供 injectScript 方法注入到当前的网页中。

除了 loadUrl 方法传参外，其他放置于 jskweb 文件夹或其子文件夹中的脚本文件都建议使用相对路径的方式加载，如 injectScript('/jskweb/userscript.js')，JSKit 将自动选择合适的源地址注入脚本。

通过上面的项目结构也可以看出 JSKit Hybrid 项目的文件会运行在两个引擎中，一个是 JSKit JS 引擎，支持 ES2020 标准；一个是 Web 浏览器引擎，提供了完整的 Web 环境。

对应的，JSKit 也提供了两套 API 来将 JSKit JS 引擎和 Web 浏览器环境互联互通：hybrid 和 jskh5。

# JSKit Hybrid 可以用来干什么？

学习 JS 和 Web 技术，在手机端随时随地验证自己的想法。JSKit Hybrid 提供了 开发者工具，方便查看控制台日志，Web Elements ，Dom 等信息。

基于 JSKit Hybrid 提供的 API 编写好玩有趣的小程序。

# 对油猴脚本的支持

JSKit 创建 JSKit Hybrid 项目时会默认提供了一个 /jskweb/gm-api.js 脚本，包含基于 jskh5 API 实现的部分 GM* 油猴脚本接口。

声明

JSKit 提供的油猴脚本 API 仅供学习交流使用。油猴脚本 API 默认不会注入到访问的网页中。请勿利用 JSKit 提供的 API 损害其他任何个人或组织的合法权益，由此产生的一切后果与 JSKit 无关。 JSKit 对相关接口不做任何担保，也不承担任何连带责任！

JSKit 对油猴脚本的支持有以下几点说明：

只提供了部分的油猴脚本接口，详细情况请阅读 gm-api.js 的源码查看。
未对油猴脚本的 meta 信息进行解析，需用户手动处理。比如 @require 信息，需要先于脚本文件使用 injectScript 注入到网页中。

# 自动无缝翻页脚本示例

自动无缝翻页 (opens new window) 是 X.I.U 编写的一个油猴脚本，非常好用！

当浏览网页向下滚动时，脚本会自动将下一页内容无缝衔接到底部（类似瀑布流，翻吖翻吖一直翻不到头~），纵享丝滑的网页浏览体验~

由于开源协议原因未能添加到 JSKit Hybrid 项目的默认模版中，这里简要说明如何在 JSKit 上导入并使用此脚本。

在脚本的代码页 https://greasyfork.org/zh-CN/scripts/419215-自动无缝翻页/code 通过安装此脚本按钮得到脚本源码 https://greasyfork.org/scripts/419215-自动无缝翻页/code/自动无缝翻页.user.js 保存下载到手机上。
JSKit 新建 JSKit Hybrid 项目，打开文件项目文件视图，单击 jskweb 文件夹，此文件夹下打开右上角菜单，选择导入文件。
找到第 1 步下载的脚本文件确认即可导入到 JSKit Hybrid 项目中。
修改 main.js 文件注入此脚本即可体验。

// 这部分代码运行在 JSKit 的引擎中，是一个 ES2020 标准引擎。
import * as jskh5 from 'hybrid';

function injectScriptIndex(list, index, cbfn) {
    if (index < list.length) {
        let url = list[index];
        jskh5.injectScript(url, loaded => {
            console.log(`js: ${url} loaded? ${loaded}`);
            //待前一个脚本注入完成后递归注入。
            injectScriptIndex(list, index + 1, cbfn);
        });
    } else {
        cbfn();
    }
}

function injectScriptList(list, cbfn) {
    injectScriptIndex(list, 0, cbfn);
}

jskh5.setWebCallback({
    onWebMessage: function (name, data, cbfn) {
        console.log('onWebMessage:', name, data);
        if (name === 'open-in-tab') {
            jskh5.loadUrl(data);
        }
    },
    onPageStarted: function (url) {
        console.log('onPageStarted:', url);
    },
    onPageFinished: function (url) {
        console.log('onPageFinished:', url);
        //注入的 userscript.js 将会运行在 WebView 中，是一个标准的 Web 浏览器
        injectScriptList([
//            '/jskweb/userscript.js',
            '/jskweb/gm-api.js',
            '/jskweb/自动无缝翻页.user.js'
        ], () => {
            console.log('脚本列表已加载完成!');
        });
    }
});

jskh5.loadUrl('https://greasyfork.org/zh-CN/scripts');

如遇问题可通过 JSKit App 设置 -> 关于 -> 问题反馈，或通过其他渠道联系我们。

← 常见问题