专栏名称: 2ger
目录
相关文章推荐
宜家家居  ·  4招毛巾收纳法,客人留宿也不怕! ·  2 天前  
一条漫画  ·  不仔细看还真看不出来... ·  2 天前  
Kane的小K屋  ·  反正世界毁灭啦,还卷什么呢 ·  2 天前  
51好读  ›  专栏  ›  2ger

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

2ger  · 掘金  ·  · 2019-11-27 15:13

正文

阅读 11

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

原因

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();
	    }
	}
}
复制代码