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

时间:2023-12-12 15:37:26

原因

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();
}
}
}