在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") // 保存全景图对象 } }
而后就是将全景图显示在页面上javascript
<div id="pano"></div>
这样全景图就能顺利加载出来了,第一次作前端知识分享,有不妥之处欢迎留言,谢谢!html