classIn程序下载按钮及网页唤起ClassIn程序链接API说明

效果预览:

classIn 自动判断下载按钮
classIn win7下载按钮
classIn winxp下载按钮
classIn macOS下载按钮
classIn iOS下载按钮
classIn Android下载按钮
移动端下载地址二维码:
classIn mobile download

启动ClassIn

下载按钮使用方法:

将下方代码复制到您的网站页面的<body>标签内,其中<a>链接替换为您的下载按钮,img标签替换为移动端下载二维码,请保证标签[data-id]属性一致

<a data-id="classInDownLoad_auto">classIn 自动判断下载按钮</a><br />
<a data-id="classInDownLoad_win7">classIn win7下载按钮</a><br />
<a data-id="classInDownLoad_winxp">classIn winxp下载按钮</a><br />
<a data-id="classInDownLoad_macOS">classIn macOS下载按钮</a><br />
<a data-id="classInDownLoad_iOS">classIn iOS下载按钮</a><br />
<a data-id="classInDownLoad_android">classIn Android下载按钮</a><br />
移动端下载地址二维码: <br /><img data-id="classInImage_mdqr" alt="classIn mobile download"><br />
<script type="text/javascript" charset="utf-8" src="./geturl_classindownload.js"></script>

唤起ClassIn 使用方法:

将下方代码复制到您的网站页面的<body>标签内,其中<a>标签的href属性改为#,click事件调用invokeClassIn()方法

<a href="javascript:void(0)" onclick="invokeClassIn('classin://www.eeo.cn/enterclass?telephone=13412345678&authTicket=i1j3l250xn5epew7&classId=265368&courseId=115697&schoolId=1000082&identity=193')">启动ClassIn</a>
<script type="text/javascript" charset="utf-8" src="./geturl_classindownload.js"></script>

你也可以尝试对invokeClassIn()的js代码进行修改后放入你的网站,以便自定义弹窗的样式:

<a href="#" onclick="invokeClassIn('classin://www.eeo.cn/enterclass?telephone=13466568859&authTicket=i1j3l250xn5epew7&classId=265368&courseId=115697&schoolId=1000082&identity=193')">启动ClassIn</a>
<script type="text/javascript" charset="utf-8">
  ; (function () {
    var invoking = false;
    var invokeClassIn = function (url) {
      if (invoking) {
        window.alert('正在启动ClassIn');
        return false;
      } else {
        invoking = true;
      }
      var cssList = {
        modalView: 'width: 270px;height: 160px;position: absolute; z-index:99999; left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: #54a267;border-radius: 5px; box-shadow:3px 3px 3px 0px #ccc;',
        closeBtn: 'position: absolute;right: 4px;top: 4px;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;color: white;cursor:pointer;',
        tips: 'display:block; text-decoration:none; line-height: 1.5;text-align: center;font-size: 16px;color: #fff; margin-top:60px;'
      }
      var box = document.createElement('div');
      box.setAttribute('style', cssList.modalView);

      var iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      box.appendChild(iframe);

      var closeBtn = document.createElement('div');
      closeBtn.setAttribute('style', cssList.closeBtn);
      closeBtn.innerText = '×';
      closeBtn.onclick = function () {
        invoking = false;
        clearInterval(updateTipsInterval);
        document.body.removeChild(box);
      }
      box.appendChild(closeBtn);

      var tipsText = document.createElement('a');
      tipsText.setAttribute('style', cssList.tips);
      tipsText.innerText = '正在加载，请稍候';
      box.appendChild(tipsText);

      document.body.appendChild(box);
      var waitTime = 0;
      var updateTipsInterval = setInterval(function () {
        if (waitTime < 5) {
          waitTime++;
          tipsText.innerText += '.';
          return false;
        }
        tipsText.href = 'http://eeo.cn';
        tipsText.setAttribute('target', '_blank');
        tipsText.innerHTML = '<span style="font-size:12px;">如果启动classIn失败请重新安装</span><br /><b style="font-size:14px;text-decoration:underline;">点击下载ClassIn</b>';
        clearInterval(updateTipsInterval);
      }, 1000);
    }
    window.invokeClassIn = invokeClassIn;
  })();
</script>

classIn程序下载按钮及网页唤起ClassIn程序链接API说明

效果预览:

下载按钮 使用方法:

将下方代码复制到您的网站页面的<body>标签内,其中<a>链接替换为您的下载按钮,img标签替换为移动端下载二维码,请保证标签[data-id]属性一致

唤起ClassIn 使用方法:

将下方代码复制到您的网站页面的<body>标签内,其中<a>标签的href属性改为#,click事件调用invokeClassIn()方法

你也可以尝试对invokeClassIn()的js代码进行修改后放入你的网站,以便自定义弹窗的样式:

下载按钮使用方法: