当前位置: 代码迷 >> JavaScript >> jsp页面调用火狐狸插件
  详细解决方案

jsp页面调用火狐狸插件

热度:466   发布时间:2013-04-09 16:45:09.0
jsp页面调用火狐插件
同事已经开发了火狐插件,用于读取非接触卡的卡片信息,但是页面上不会调用,查了资料之后发现其实蛮简单,就是坑比较多。
  1. <head>
  2. <title>测试</title>    
  3. <embed id="plugin" type="application/intime-plugin" style="display:block;width:50%;height:100px;"></embed>
  4. <script language="JavaScript">
  5.      var plugin = document.getElementById("plugin");
  6. function doTest() {
  7.         plugin.getcard();
  8.         card = plugin.getcard;
  9.         alert(card);
  10. }     
  11. </script>
  12. </head>
  13. <body>    
  14.     <form name="formname">
  15.      <input type="button" onclick="doTest()" value="读卡"/>
  16.     </form>
  17. </body>
embed是插件的载入,getcard()是读取卡的操作,getcard是获得卡号信息。
1、即便使用jQuery,在定位插件所在DOM元素的时候也不能使用jQuery自带的selector,否则读不出来
2、插件不能被隐藏,如果被隐藏之后,就失效了,所以display:none;或者hide()都不可取。
原文参考自web开发网:http://www.software8.co/wzjs/

将这个写成了插件,方便读卡操作使用。
  1. (function($){
  2.     $.fn.swipeCpu = function(params){
  3.         var defaults = {
  4.                 trigger:false
  5.         };
  6.         $.extend(defaults, params);
  7.         var ele = $(this);
  8.         //height 1px,width 0px 尽可能压缩插件在页面的位置,不能设为0,也不能将display设置none,会导致插件失效;
  9.         ele.after("<embed id=\"plugin-cpu-read\" type=\"application/intime-plugin\" style=\"display:block;height:0px;width:0px;\">");
  10.         var plugin = document.getElementById("plugin-cpu-read");
  11.         plugin.getcard();
  12.         //虽然在插件中定义了该属性是字符串,但是传递出来的是个对象,所以只能先复制到文本框,再取值,再截取
  13.         var cardno = plugin.getcard;
  14.         ele.val(cardno);
  15.         cardno = substrCard($(this).val());
  16.         ele.val(cardno);
  17.         $("#plugin-cpu-read").remove();
  18.         //是否需要触发回车事件
  19.         if(defaults.trigger){
  20.             var event = $.Event("keyup");
  21.             event.keyCode = 13;
  22.             event.which = 13;
  23.             ele.trigger(event);
  24.         }
  25.     };
  26. })(jQuery);
  相关解决方案