快捷導(dǎo)航

前端vue2中直接拉起vnc客戶端實(shí)現(xiàn)方式

更新時(shí)間：2025年08月20日 11:18:21 作者：隱含

本文介紹Vue項(xiàng)目中協(xié)議檢測(cè)工具類與組件的實(shí)現(xiàn),通過(guò)封裝檢測(cè)邏輯提升復(fù)用性,并展示如何在組件中應(yīng)用工具類進(jìn)行協(xié)議校驗(yàn)與數(shù)據(jù)展示

前端vue2中直接拉起vnc客戶端

協(xié)議檢測(cè)工具類

(src/utils/protocolCheck.js)

//1. 協(xié)議檢測(cè)工具類 (src/utils/protocolCheck.js)
//javascript
// 瀏覽器檢測(cè)函數(shù)
function checkBrowser() {
  const isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
  const ua = navigator.userAgent.toLowerCase();
  return {
    isOpera: isOpera,
    isFirefox: typeof InstallTrigger !== 'undefined',
    isSafari: (~ua.indexOf('safari') && !~ua.indexOf('chrome')) || 
              Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0,
    isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,
    isChrome: !!window.chrome && !isOpera,
    isIE: /*@cc_on!@*/false || !!document.documentMode
  }
}

// IE版本檢測(cè)
function getInternetExplorerVersion() {
  let rv = -1;
  if (navigator.appName === 'Microsoft Internet Explorer') {
    const ua = navigator.userAgent;
    const re = new RegExp('MSIE ([0-9]{1,}[\.0-9]{0,})');
    if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
  } else if (navigator.appName === 'Netscape') {
    const ua = navigator.userAgent;
    const re = new RegExp('Trident/.*rv:([0-9]{1,}[\.0-9]{0,})');
    if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
  }
  return rv;
}

// 事件注冊(cè)輔助函數(shù)
function _registerEvent(target, eventType, cb) {
  if (target.addEventListener) {
    target.addEventListener(eventType, cb);
    return {
      remove: function() {
        target.removeEventListener(eventType, cb);
      }
    };
  } else {
    target.attachEvent('on' + eventType, cb);
    return {
      remove: function() {
        target.detachEvent('on' + eventType, cb);
      }
    };
  }
}

// 創(chuàng)建隱藏iframe
function _createHiddenIframe(target, uri) {
  const iframe = document.createElement('iframe');
  iframe.src = uri;
  iframe.id = 'hiddenIframe';
  iframe.style.display = 'none';
  target.appendChild(iframe);
  return iframe;
}

// 各種瀏覽器處理函數(shù)
function openUriWithHiddenFrame(uri, failCb, successCb) {
  const timeout = setTimeout(function() {
    failCb();
    handler.remove();
  }, 1000);

  let iframe = document.querySelector('#hiddenIframe');
  if (!iframe) {
    iframe = _createHiddenIframe(document.body, 'about:blank');
  }

  const handler = _registerEvent(window, 'blur', onBlur);

  function onBlur() {
    clearTimeout(timeout);
    handler.remove();
    successCb();
  }

  iframe.contentWindow.location.href = uri;
}

function openUriWithTimeoutHack(uri, failCb, successCb) {
  const timeout = setTimeout(function() {
    failCb();
    handler.remove();
  }, 1000);

  let target = window;
  while (target != target.parent) {
    target = target.parent;
  }

  const handler = _registerEvent(target, 'blur', onBlur);

  function onBlur() {
    clearTimeout(timeout);
    handler.remove();
    successCb();
  }

  window.location = uri;
}

function openUriUsingFirefox(uri, failCb, successCb) {
  let iframe = document.querySelector('#hiddenIframe');
  if (!iframe) {
    iframe = _createHiddenIframe(document.body, 'about:blank');
  }

  try {
    iframe.contentWindow.location.href = uri;
    successCb();
  } catch (e) {
    if (e.name == 'NS_ERROR_UNKNOWN_PROTOCOL') {
      failCb();
    }
  }
}

function openUriUsingIEInOlderWindows(uri, failCb, successCb) {
  const version = getInternetExplorerVersion();
  if (version === 10) {
    openUriUsingIE10InWindows7(uri, failCb, successCb);
  } else if (version === 9 || version === 11) {
    openUriWithHiddenFrame(uri, failCb, successCb);
  } else {
    openUriInNewWindowHack(uri, failCb, successCb);
  }
}

function openUriUsingIE10InWindows7(uri, failCb, successCb) {
  const timeout = setTimeout(failCb, 1000);
  window.addEventListener('blur', function() {
    clearTimeout(timeout);
    successCb();
  });

  let iframe = document.querySelector('#hiddenIframe');
  if (!iframe) {
    iframe = _createHiddenIframe(document.body, 'about:blank');
  }
  try {
    iframe.contentWindow.location.href = uri;
  } catch (e) {
    failCb();
    clearTimeout(timeout);
  }
}

function openUriInNewWindowHack(uri, failCb, successCb) {
  const myWindow = window.open('', '', 'width=0,height=0');
  myWindow.document.write("<iframe src='" + uri + "'></iframe>");

  setTimeout(function() {
    try {
      myWindow.location.href;
      myWindow.setTimeout('window.close()', 1000);
      successCb();
    } catch (e) {
      myWindow.close();
      failCb();
    }
  }, 1000);
}

function openUriWithMsLaunchUri(uri, failCb, successCb) {
  navigator.msLaunchUri(uri, successCb, failCb);
}

// 主導(dǎo)出函數(shù)
export function protocolCheck(uri, failCb, successCb, unsupportedCb) {
  function failCallback() {
    failCb && failCb();
  }

  function successCallback() {
    successCb && successCb();
  }

  if (navigator.msLaunchUri) {
    openUriWithMsLaunchUri(uri, failCallback, successCallback);
  } else {
    const browser = checkBrowser();

    if (browser.isFirefox) {
      openUriUsingFirefox(uri, failCallback, successCallback);
    } else if (browser.isChrome || browser.isIOS) {
      openUriWithTimeoutHack(uri, failCallback, successCallback);
    } else if (browser.isIE) {
      openUriUsingIEInOlderWindows(uri, failCallback, successCallback);
    } else if (browser.isSafari) {
      openUriWithHiddenFrame(uri, failCallback, successCallback);
    } else {
      unsupportedCb && unsupportedCb();
    }
  }
}

Vue 組件實(shí)現(xiàn)

(src/components/ProtocolChecker.vue)

<template>
  <div class="protocol-checker">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>VNC 連接器</span>
        </div>
      </template>

      <el-form label-position="top">
        <el-form-item label="VNC 連接地址">
          <el-input 
            v-model="vncUrl" 
            placeholder="例如: com.realvnc.vncviewer.connect://10.0.66.98:20"
            clearable>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="handleProtocolCheck"
            icon="el-icon-connection">
            啟動(dòng)連接
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false">
      <div class="dialog-content">
        <el-alert
          :title="dialogMessage"
          :type="alertType"
          :closable="false"
          show-icon>
        </el-alert>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">關(guān)閉</el-button>
        <el-button
          v-if="showDownload"
          type="primary"
          @click="openDownloadPage">
          下載 VNC Viewer
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { protocolCheck } from '@/utils/protocolCheck'

export default {
  name: 'ProtocolChecker',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      dialogTitle: '',
      dialogMessage: '',
      alertType: 'info',
      showDownload: false,
      vncUrl: 'com.realvnc.vncviewer.connect://10.0.66.98:20'
    }
  },
  methods: {
    handleProtocolCheck() {
      if (!this.vncUrl) {
        this.showDialog('錯(cuò)誤', '請(qǐng)輸入有效的VNC連接地址', 'error')
        return
      }

      this.loading = true
      
      protocolCheck(  //直接用這個(gè)方法就可以了
        this.vncUrl,
        () => {
          // 失敗回調(diào)
          this.showDialog(
            '未檢測(cè)到VNC Viewer', 
            '您的系統(tǒng)未安裝VNC Viewer或協(xié)議不受支持', 
            'error',
            true
          )
          this.loading = false
        },
        () => {
          // 成功回調(diào)
          this.showDialog(
            '正在連接', 
            '正在啟動(dòng)VNC Viewer應(yīng)用程序...', 
            'success'
          )
          this.loading = false
        },
        () => {
          // 瀏覽器不支持回調(diào)
          this.showDialog(
            '瀏覽器不支持', 
            '您的瀏覽器不支持此功能，請(qǐng)使用Chrome/Firefox/Edge瀏覽器', 
            'warning'
          )
          this.loading = false
        }
      )
    },

    showDialog(title, message, type = 'info', showDownload = false) {
      this.dialogTitle = title
      this.dialogMessage = message
      this.alertType = type
      this.showDownload = showDownload
      this.dialogVisible = true
    },

    openDownloadPage() {
      window.open('https://www.realvnc.com/en/connect/download/viewer/', '_blank')
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.protocol-checker {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-content {
  margin-bottom: 20px;
}
</style>