用户脚本@require和@resource引入的脚本和资源在安装时下载一次,保存在用户脚本相同的位置。
bootstrap引入的css图片资源,是相对于css文件的,如果图片文件和css文件在相同的位置,则页面显示会有问题,只能修改css里面所有的图片资源不能包含路径,这个工作量很大,难度也很大。
如果将css文件和图片资源文件保存在服务器端,在用户脚本运行时动态加载到页面头文件,虽然每次都需要从服务器端下载CSS文件和资源文件,有些许网络资源消耗,但兼容性很好,是值得推荐的方法。
以下是加载bootstrap库的测试。
1、准备web项目,路径结构如图:
2、page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游猴插件测试页面</title>
</head>
<body>
<div id="container">
<button οnclick="alert('page button click event:' + $)">content button</button>
</div>
<div id="install"><a href="userscripts/test.user.js">用户脚本安装</a></div>
</body>
</html>
3、test.user.js
// ==UserScript== // @name test // @namespace http://yc.telecomjs.com/gm // @description 油猴jQuery库测试 // @include http://localhost:8080/gm/page.html // @require http://localhost:8080/gm/libs/jquery/jquery-1.12.1.min.js // @require http://localhost:8080/gm/libs/bootstrap-3.3.6/js/bootstrap.min.js // @grant unsafeWindow // @version 2.1 // ==/UserScript== console.log('user script jquery:' + $.fn.jquery); $('head').append('<link href="http://localhost:8080/gm/libs/bootstrap-3.3.6/css/bootstrap.min.css" rel="stylesheet">'); var button_str = '<button id="script_btn" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">' + 'script button' + '</button>'; var modal_str = '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">' + '<div class="modal-dialog" role="document">' + '<div class="modal-content">' + '<div class="modal-header">' + '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>' + '<h4 class="modal-title" id="myModalLabel">Modal title</h4>' + '</div>' + '<div class="modal-body">' + '测试' + '</div>' + '<div class="modal-footer">' + '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' + '<button type="button" class="btn btn-primary">Save changes</button>' + '</div>' + '</div>' + '</div>' + '</div>'; $('#container').append(button_str); $('#container').append(modal_str);
4、总结
以上代码经过部署测试,样式、事件均正常展示和触发,所以在引入重ajax库(jquery-ui、easyUI、bootstrap)时,由于包含图片、字体等相对路径文件,直接在用户脚本文件中引入是不方便的,通过ajax脚本方式从服务器取库文件是比较好的实践。