jsp页面调用火狐插件

最新推荐文章于 2020-04-22 10:36:36 发布

362576256

最新推荐文章于 2020-04-22 10:36:36 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/newzzorg/article/details/8774039

版权

同事已经开发了火狐插件，用于读取非接触卡的卡片信息，但是页面上不会调用，查了资料之后发现其实蛮简单，就是坑比较多。

 
  <head>
 
 <title>测试</title>    
 
 <embed id="plugin" type="application/intime-plugin" style="display:block;width:50%;height:100px;"></embed>
 
 <script language="JavaScript">
 
      var plugin = document.getElementById("plugin");
 
 function doTest() {
 
         plugin.getcard();
 
         card = plugin.getcard;
 
         alert(card);
 
 }     
 
 </script>
 
 </head>
 
 <body>    
 
     <form name="formname">
 
      <input type="button" onclick="doTest()" value="读卡"/>
 
     </form>
 
 </body>

embed是插件的载入，getcard()是读取卡的操作，getcard是获得卡号信息。
1、即便使用jQuery，在定位插件所在DOM元素的时候也不能使用jQuery自带的selector，否则读不出来
2、插件不能被隐藏，如果被隐藏之后，就失效了，所以display:none;或者hide()都不可取。
原文参考自web开发网：http://www.software8.co/wzjs/

将这个写成了插件，方便读卡操作使用。

 
  (function($){
 
     $.fn.swipeCpu = function(params){
 
         var defaults = {
 
                 trigger:false
 
         };
 
         $.extend(defaults, params);
 
         var ele = $(this);
 
         //height 1px,width 0px 尽可能压缩插件在页面的位置，不能设为0，也不能将display设置none,会导致插件失效；
 
         ele.after("<embed id=\"plugin-cpu-read\" type=\"application/intime-plugin\" style=\"display:block;height:0px;width:0px;\">");
 
         var plugin = document.getElementById("plugin-cpu-read");
 
         plugin.getcard();
 
         //虽然在插件中定义了该属性是字符串，但是传递出来的是个对象，所以只能先复制到文本框，再取值，再截取
 
         var cardno = plugin.getcard;
 
         ele.val(cardno);
 
         cardno = substrCard($(this).val());
 
         ele.val(cardno);
 
         $("#plugin-cpu-read").remove();
 
         //是否需要触发回车事件
 
         if(defaults.trigger){
 
             var event = $.Event("keyup");
 
             event.keyCode = 13;
 
             event.which = 13;
 
             ele.trigger(event);
 
         }
 
     };
 
 })(jQuery);