在Vue項目中加載krpano全景圖

在Vue-cli項目中做krpano全景圖編輯器的時候,由於js插件的路徑是動態的，做的過程中遇到了加載不到資源的難題,在網上搜索了好久也沒找到合適的辦法,最后想到了可能是JS加載的問題,於是解決了問題,下面跟大家分享一下做法。

首先, 在vue的路由頁面中加載動態的js插件,需要等待JS文件加載完成之后,才能使用JS插件中的方法來加載全景圖:

    // 加載動態JS文件
    var _doc = document.getElementsByTagName('head')[0];
    var js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', jsUrl);    // jsUrl是JS文件的路徑
    _doc.appendChild(js);
    
    // 下面是加載全景圖, 針對不同瀏覽器做兼容
    if (document.all) { //如果是IE
      js.onreadystatechange = function () {
        if (js.readyState == 'loaded' || js.readyState == 'complete') {
          embedpano({                // js插件中的方法，用於加載全景圖
            swf: that.tourSwfUrl,
            xml: that.tourXmlUrl,
            target: "pano",
            html5: "always",
            mobilescale: 1.0,
            passQueryParameters: true
          });
          that.krpano = document.getElementById("krpanoSWFObject");
        }
      }
    }
    else {
      js.onload = function () {
        embedpano({
          swf: this.tourSwfUrl,        // krpano全景圖的swf文件路徑
          xml: this.tourXmlUrl,        // krpano全景圖的xml文件路徑
          target: "pano",             
          html5: "auto",
          mobilescale: 1.0,
          flash: 'auto',
          passQueryParameters: true
        });
        this.krpano = document.getElementById("krpanoSWFObject")        // 保存全景圖對象
      }
    }

然后就是將全景圖顯示在頁面上

<div id="pano"></div>

這樣全景圖就能順利加載出來了，第一次做前端知識分享，有不妥之處歡迎留言，謝謝！

原文地址：https://segmentfault.com/a/1190000017292935