krpano下全屏后弹窗失效问题解决方法

krpano下全屏后弹窗失效问题解决方法

技术杂谈小彩虹2021-07-08 8:08:511540A+A-

原因

krpano 自身的全屏仅全屏自身,以外的html效果将无法显示

解决方法

把全屏按钮换成浏览器自身的全屏效果

解决步骤

vtourskin.xml

<layer name="new_btn_fs" style="skin_base" crop="433|207|57|73" align="righttop" x="16" y="56" width="64px" height="prop"  scale="0.5" onclick="switch(fullscreen);" devices="fullscreensupport" visible="true" zorder="4"></layer>
** 改成  onclick="js('fullScreen()');" **
<!-- 全屏按钮 -->
<layer name="new_btn_fs" style="skin_base" crop="433|207|57|73" align="righttop" x="16" y="56" width="64px" height="prop"  scale="0.5" onclick="js('fullScreen()')" devices="fullscreensupport" visible="true" zorder="4"></layer>

tour.html

增加js方法

// 修复krpano全屏其它js无效问题。》 使用浏览器自身的全屏 
function fullScreen() {
	 var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
        document.msFullscreenElement || document.fullscreenElement
    );//!document.webkitIsFullScreen都为true。因此用!!
    if (isFull==false) {
 		var element = document.documentElement;
	    if (element.requestFullscreen) {
	        element.requestFullscreen();
	    } else if (element.msRequestFullscreen) {
	        element.msRequestFullscreen();
	    } else if (element.mozRequestFullScreen) {
	        element.mozRequestFullScreen();
	    } else if (element.webkitRequestFullscreen) {
	        element.webkitRequestFullscreen();
	    }

	}else{
	     if (document.exitFullscreen) {
        document.exitFullscreen();
	    } else if (document.msExitFullscreen) {
	        document.msExitFullscreen();
	    } else if (document.mozCancelFullScreen) {
	        document.mozCancelFullScreen();
	    } else if (document.webkitExitFullscreen) {
	        document.webkitExitFullscreen();
	    }
	}
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们