当前位置: 首页 > news >正文

cdn jquery怎么没有提示_jQuery终端模拟器——基于web的终端

9ce4f7e41e2d24ccd1155f8fc3c8a394.gif

概述

jQuery终端模拟器是一个插件,用于在应用程序中创建命令行解释器。当用户输入命令时,它可以自动调用JSON-RPC服务,或者你也可以提供自定义的函数来解析用户命令。如果你想为高级用户提供额外的功能,这也是非常理想的工具。它还可以用于调试应用程序。

你可以使用这个JavaScript库在任何站点上创建基于web的终端。

特性:

  • 你可以用一行代码为你的JSON-RPC服务创建一个解释器(只需将url作为第一个参数)。

  • 支持身份验证 (当用户输入登录名和密码时,你可以提供函数来进行验证,或者如果你使用了JSON-RPC服务,它可以自动调用服务器上的登录函数,并向所有函数传递token(令牌))。

  • 解释器堆——你可以创建触发另外的解释器的命令(例如,你可以使用两个JSON-RPC服务来在用户输入命令时运行它们)

  • 命令树——你可以使用嵌套对象。每个命令都将调用一个函数,如果返回值是一个对象,它将创建一个新的解释器并将该对象中的函数作为命令使用。你可以使用任意多的嵌套对象/命令。如果函数返回值是一个字符串,那么它将创建JSON-RPC服务。

  • 支持命令行历史记录,如果可能,它会使用本地存储。

  • 支持Tab键补全。

  • 支持来自bash的键盘快捷键,比如CTRL+A, CTRL+D, CTRL+E等。

  • 支持多标签窗口 (每个终端可以有不同的命令,有自己的身份验证功能和命令历史记录)。

  • 它会捕获所有异常并在终端中显示错误消息(如果javascript和php代码位于解释器函数中,你可以在终端中看到它们中的错误)。

  • 使用扩展命令,你可以在不触及前端代码的情况下更改终端的工作 (使用echo方法和类似终端格式的语法)。想了解更多,请阅读文档。安装

要引入JQuery库,你可以从 http://jquery.com/download/  使用CDN

5a1b825d3c947ffb26ba2c0b075baa70.png

然后引入 js/jquery.terminal-2.4.1.min.js  和  css/jquery.terminal-2.4.1.min.css 库

你可以从CDN中抓取文件

95d082354ec806773e4fc1c9f1827138.png

或者

a20842bd2c5b3d13aa366a6c636b0b86.png

如果你总是想使用最新版本,你可以从unpkg (一个前端常用的公共 CDN)获取,不需要指定版本,unpkg会重定向到最新版本:

4eaee0b0e602cc7b1d870dc07f5d10b9.png

Bleeding Edge版本

如果你想测试 bleeding edge的jQuery终端开发版本,你可以使用这些文件:

0c78931923084d14e80f52b17c85d520.png

但该服务将于2019年10月关闭,并不再接受新文件。rawgit 的伟大之处在于(至少你不需要引用cdn子域名),当GitHub上的提交推送之后,你可以非常快地获得最新版本(有时你需要添加非缓存查询字符串,任何惟一的东西,以便更快地刷新)。

这里还有来自 jsdelivr 的替代方案:

c276a5476b622d1f6705ae5f0dbe288a.png

但是它的刷新速度没有 rawgit 快,因为它使用的是CDN,需要传播到不同的服务器。

Keyboard key polyfill

注意: 从1.0.0版本开始,如果你想支持旧的浏览器,那么你将需要使用 key event property polyfill。你可以在 "我可以使用吗"(https://caniuse.com/#feat=keyboardevent-key  ) 上查看对它的支持(正如你在图表中看到的, Android是需要它的,所以你可以添加它)。

29a4dc6eb05ba6831efd1859bfe7b3f4.png

13b6f15d584b6725915d8d9144616977.png

命令行

你也可以使用命令行从 bower 仓库 来安装jQuery 终端:

fde0c15cba37048f75f326ad423c5643.png

或者从 npm 仓库:

16c5e4245d83fe49983de2101ffdfb62.png

用法示例

这是使用低级函数的代码,它会给你完全控制代码的权限,你只需要将用户输入的任何内容传递到函数中即可。

6e25b7e0986f07622c80b8971161ac87.png

这里是一个更高级别的调用,它使用对象作为解释器,默认情况下终端会解析用户输入的命令,将类似于字符串的数字替换为含有多个正则表达式的实数正则表达式,并处理双引号字符串中的转义字符。

6e25b7e0986f07622c80b8971161ac87.png

foo命令会从foo.php文件执行json-rpc。

你可以使用一行代码来创建带有身份验证的JSON-RPC解释器:

adc54289cf37fab2b0e14b5207ebdb12.png

这里(http://terminal.jcubic.pl/examples.php  )有更多的例子。你也可以查看完整的文档或者Wiki中的入门指南。

安全性

出于安全性的考虑,1.20.0版本中不同协议(ftp或http(s))的链接(可以输入javascript协议,这样如果应用程序的作者回显用户输入并将其保存在DB中的话,就可能会导致XSS)默认是关闭的。要启用它,你需要使用 anyLinks: true选项。

在1.21.0版本中,使用扩展命令执行终端方法 [[ terminal :: clear( )]] 在默认情况下也是禁用的,因为攻击者(取决于你的应用程序)可以使用raw选项执行terminal::echo命令来输入任何html和执行任何javascript。要在这个版本中启用此特性,你需要使用invokeMethods: true选项。

如果你不将用户输入保存在DB中,也不将其回显给不同的用户(比如聊天应用程序),那么启用这些特性是安全的。如果你在回显用户输入之前对它进行转义格式化,那这也是安全的。

如果你不在DB中保存用户输入,但允许回显用户输入并启用了execHash选项,那么如果启用该特性,则可能会导致XSS漏洞。如果你进行了转义格式化,那么此选项也是安全的。

注意: 如果你开启了execHash选项(或使用invokeMethods: true来回显用户输入),那么需要禁用exec,你还可以对echo调用设置选项{exec: false},并在只有当你从服务器(不是从间接来自用户的DB中)获得值时才使用它。这样做,你就能够回显用户输入,并从服务器执行终端方法(此特性主要用于这个目的)。

贡献者

如果你想为本项目做贡献,请首先阅读CONTRIBUTING.md文件。以下是本项目的贡献者:

01ce34a89b5e9a08217f964d33c98a52.png

jQuery终端网站贡献者:

0da85e0ca478f0c3a050b87342efe7d9.png

许可证

基于MIT许可授权

Copyright(c) 2011-2019 Jakub Jankiewicz

英文原文:https://github.com/jcubic/jquery.terminal

译者:忧郁的红秋裤

相关文章:

  • printf 指针地址_C语言零基础入门-指针-03
  • python有颜色进度条库_wxPython实现带颜色的进度条
  • python字典的一些操作_python 字典的一些操作
  • git 如何重新登录github_GitHub多账号管理
  • 解决python脚本连接终止问题_paramiko:自动终止远程启动的进程
  • eclipse ide for c/c++_重拾《 两周自制脚本语言 》- Eclipse插件实现语法高亮
  • eclipse启动springboot项目_教程:Systemctl启动SpringBoot项目
  • 非管理员用户使用iis_(七)使用管理员身份新增使用用户
  • php制作万年历的步骤_Excel 制作偶像万年历
  • 循环buffer的实现_用PHP实现高并发服务器
  • 统计一行文本的单词个数_【我爱背单词】从300万单词中给你一份3000英语新闻高频词汇...
  • hbase查询语句_Phoenix+Hbase二级索引
  • kafka源码_Kafka源码阅读之:日志段kafka.log.LogSegment
  • python怎么安装re模块_python模块模块re
  • java练习_java练习本(原每日一练)(20190429)
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • 【前端学习】-粗谈选择器
  • 30天自制操作系统-2
  • CSS 提示工具(Tooltip)
  • ES6简单总结(搭配简单的讲解和小案例)
  • js继承的实现方法
  • SSH 免密登录
  • vue脚手架vue-cli
  • 基于 Babel 的 npm 包最小化设置
  • 基于遗传算法的优化问题求解
  • 栈实现走出迷宫(C++)
  • 正则与JS中的正则
  • media数据库操作,可以进行增删改查,实现回收站,隐私照片功能 SharedPreferences存储地址:
  • ​批处理文件中的errorlevel用法
  • ![CDATA[ ]] 是什么东东
  • ###STL(标准模板库)
  • #laravel 通过手动安装依赖PHPExcel#
  • (10)Linux冯诺依曼结构操作系统的再次理解
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (亲测有效)解决windows11无法使用1500000波特率的问题
  • .net 8 发布了,试下微软最近强推的MAUI
  • .NET MVC之AOP
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET 将多个程序集合并成单一程序集的 4+3 种方法
  • .Net 路由处理厉害了
  • .Net的C#语言取月份数值对应的MonthName值
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  • ??eclipse的安装配置问题!??
  • @Bean注解详解
  • [ C++ ] STL_list 使用及其模拟实现
  • [ 云计算 | AWS ] AI 编程助手新势力 Amazon CodeWhisperer:优势功能及实用技巧
  • [android] 切换界面的通用处理
  • [APIO2012] 派遣 dispatching
  • [BUUCTF 2018]Online Tool
  • [C/C++] C/C++中数字与字符串之间的转换
  • [CVPR 2023:3D Gaussian Splatting:实时的神经场渲染]
  • [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
  • [ffmpeg] 定制滤波器