如何解决if else 函数在移动设备上运行 JS 容器
这个演示是嵌入式的，我希望嵌入式版本可以在桌面上运行，而演示在移动设备上的播放器中运行，这样它就会在移动设备上响应地超过屏幕。我在考虑 If else 和 useragent 函数，但我总是在两个演示文稿的播放器中返回相同的结果。
JS.
<link type="text/css" rel="stylesheet" href="-/media/renasantbank/tutorials/tutorials.css">
<script type="text/javascript" src="-/media/back-up-calculators/externalstepdemoplayer.js">
</script>
<script type="text/javascript">
function ShowDemo(demoID){
$('#player').empty();
Lemonade.DemoPlayer.play({
demo: demoID,container: $('#player'),locale: 'en_US',finishButtonText: 'Continue',horizontalPadding: 25,onFinish: function () {
location.reload();
$( ".modal-content button.close" ).click();
$("#player").html(
);
// you can do anything when the game ends!
},onStepChange: function (previousStep,currentStep,currentHotspot,totalSteps) {
// every time the scene changes,this event is called
},});
}
function LoadDemo() {
ShowDemo('0b7a6a13-2f42-426e-adc4-f894fa31001d');
}
function Refresh() {
window.parent.location = window.parent.location.href;
}
window.onload = LoadDemo;
</script>
HTML.
<div class="player-popup modal show" id="player_popup" aria-modal="true" style="display:
block;">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="desktop">×</button>
<div id="player" max-width="767px 480px 860px 540px">
<div id="finishModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-
hidden="true">×</span></button>
<link rel="stylesheet" href="https://understandingrenasant.com/assets/external_stepdemo.css"
/>
<style>
#player[max-width~="767px"] #demo-controls {
font-size: 21px;
line-height: 1.2;
padding-top: 16px;
}
#player[max-width~="480px"] #demo-controls {
padding: 11px 12px 8px 12px;
}
#player[min-width~="860px"] #demo-controls.no-learn-more-text #scene-description {
font-size: 24px;
}
#player[max-width~="767px"] #demo-controls.no-learn-more-text {
padding: 19px 12px 12px;
}
#player[max-width~="480px"] #demo-controls.no-learn-more-text {
padding-top: 11px;
}
#player[max-width~="767px"] #demo-controls #scene-counter {
margin: 0 20px;
}
#player[max-width~="480px"] #demo-controls #scene-counter {
display: block;
font-size: 18px;
min-width: 0;
width: 80px;
margin: 0;
}
#player[max-width~="860px"] #demo-controls #scene-description {
font-size: 18px;
}
#player[max-width~="767px"] #demo-controls #scene-description {
width: 300px;
word-wrap: break-word;
}
#player[max-width~="540px"] #demo-controls #scene-description {
font-size: 17px;
width: 220px;
max-width: 230px;
}
#player[max-width~="480px"] #demo-controls #scene-description {
line-height: 0.9;
}
#player[max-width~="767px"] #demo-controls .inner-container {
padding-right: 40px;
}
#player[max-width~="767px"] #learn-more-toggle {
position: absolute;
top: -2px;
right: 0;
}
#player[max-width~="480px"] #learn-more-toggle {
top: 6px;
}
#player[max-width~="767px"] #learn-more-toggle span {
display: none;
}
#player[max-width~="767px"] #learn-more-toggle i {
display: block;
}
#player[max-width~="480px"] #demo-info {
padding: 10px 10px 10px 20px;
}
#player[max-width~="767px"] #exit-summary-container {
padding: 15px 40px;
}
#player[max-width~="480px"] #exit-summary-container {
padding: 15px 10px;
}
</style>
<div id="demo-controls" class="overlay-bar no-learn-more-text" style="display: block; height:
67px;">
<div class="inner-container">
<div class="complete">
<div>You've successfully completed this tutorial.</div>
<div>Here's some additional information.</div>
<div class="completion-text"> </div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6">
You might also like: <a href="#">
</a>
<div class="img-container"><a href="#"> </a></div>
</div>
</div>
</div>
</div>
<div id="scene-counter" data-tabbable="1" role="button" aria-expanded="false">
Step <span class="current-step-num">1</span>
</div>
<span style="background-color: rgba(77,77,0.7);"></span><a rel="noopener noreferrer"
href="/digital-discovery" target="_blank" style="color: #25a4e1; background-color: rgba(77,0.7); margin: 0px; padding: 0px; border: 0px;">>>>View more tutorials here.
</a></div>
<div id="exit-summary-container" style="top: 67px;">
<div id="exit-summary-title" class="title" data-tabbable="1">All Done!</div>
<div id="exit-summary-text" class="paragraph"><a rel="noopener noreferrer"
href="https://www.renasantbank.com/digital-discovery#example3" target="_blank" style="color:
#25a4e1; margin: 0px; padding: 0px; border: 0px;">>>>View more tutorials here.</a>
</div>
<div id="exit-summary-button">
<button class="btn btn-primary" data-tabbable="1">Continue</button>
</div>
</div>
</div>
<div id="screen-list-container" style="top: 67px;">
<div class="selector-text">
<em class="fa fa-arrow-left close" data-tabbable="1"></em>
Step Selector </div>
<ul id="screen-list" role="menu">
<li role="menuitem" data-tabbable="1" data-screen-index="0" class="active">Enrollment
Page</li>
<li role="menuitem" data-tabbable="1" data-screen-index="1">Enrollment Page</li>
<li role="menuitem" data-tabbable="1" data-screen-index="2">Enter your information</li>
<li role="menuitem" data-tabbable="1" data-screen-index="3">Click continue</li>
<li role="menuitem" data-tabbable="1" data-screen-index="4">Enrollment Address</li>
<li role="menuitem" data-tabbable="1" data-screen-index="5">Click continue</li>
<li role="menuitem" data-tabbable="1" data-screen-index="6">Enrollment Login Details</li>
<li role="menuitem" data-tabbable="1" data-screen-index="7">Click continue</li>
<li role="menuitem" data-tabbable="1" data-screen-index="8"><a rel="noopener noreferrer"
href="https://www.renasantbank.com/digital-discovery#example3" target="_blank" style="color:
#25a4e1; margin: 0px; padding: 0px; border: 0px;">View more tutorials HERE</a></li>
<li role="menuitem" data-tabbable="1" data-screen-index="9"><a rel="noopener noreferrer"
href="https://www.renasantbank.com/digital-discovery#example3" target="_blank" style="color:
#25a4e1; margin: 0px; padding: 0px; border: 0px;">View more tutorials HERE</a></li>
</ul>
</div>
<div id="demo-info" class="overlay-bar">
<span id="demo-title" data-tabbable="1"><a rel="noopener noreferrer"
href="https://www.renasantbank.com/digital-discovery#example3" target="_blank" style="color:
#ffffff; margin: 0px; padding: 0px; border: 0px;">View more tutorials HERE</a></span>
<div id="simulator-mode-exit">
<span data-tabbable="1">You can exit this simulator anytime</span>
<a class="exit-link">
<button class="btn btn-primary" data-tabbable="1">Click here</button>
</a>
</div>
</div>
<div id="mobile-touch-display" class="overlay-bar" data-tabbable="1" style="display: none;
top: 67px;">
<div class="center-div">
<em class="fa fa-arrows" aria-hidden="true"></em>
<span>This demo was designed for a larger screen. Scroll to see the entire scene.</span>
<button id="close-touch-display" class="btn btn-primary" data-tabbable="1">Close warning and
proceed</button>
</div>
</div>
<div class="external-player-inner-container">
<div id="scene-stage-container" style="padding-bottom: 176px;">
<div id="stage-accessibility-text" class="sr-only" role="contentinfo"> </div>
<div id="html-viewport" style="top: 100px; height: 785px;">
<div class="white-mask"> </div>
<div id="bounding-box-overlay" style="top: 194px; left: 174.5px; width: 320px; height:
180.328px;"> </div>
<div id="dom-hotspot" data-tabbable="1" role="button" aria-label="A hotspot is highlighted.
Choose 'ATM or Debit Card.'" style="position: absolute; top: 194px; left: 321.5px; width:
26px; height: 23px; opacity: 1; visibility: visible;">
<div id="guideTextContainer" class="bottom">
<div class="line"> </div>
<div class="box" style="top: -29.664px;">
<div class="label label-info">Hint</div>
<div id="guide_text_content">Choose "ATM or Debit Card."</div>
</div>
</div>
</div>
</div>
<div class="inner-container">
<div id="scene-stage">
<div class="konvajs-content" role="presentation" style="position: relative; width: 1049px;
height: 835px;"><canvas width="1049" height="835" style="padding: 0px; margin: 0px; border:
0px; background: transparent; position: absolute; top: 0px; left: 0px; width: 1049px; height:
835px;"></canvas></div>
</div>
</div>
</div>
</div>
<div style="display:none;">
<div id="play-modal-text">Play mode is like practice mode,just without coach marks!</div>
<div id="tip-text">Tip: Stuck? Check the hint up top!</div>
<div id="demo-unplayable-text">This demo has been marked as unplayable. Please run through the
demo and adjust any missing content.</div>
<div id="dont-show-again-text">Don't show this again</div>
<div id="incomplete-game-warning">This demo has an invalid configuration.</div>
<div id="click-to-close">Click to close</div>
<div id="practice-again-text">Practice Again</div>
<div id="play-for-real-text">Play For Real!</div>
<div id="back-to-course-text">Back to Course</div>
<div id="practice-complete-text">Practice Complete!</div>
</div>
<div id="external-alert-container">
<div id="lm-alert" class="modal fade lm-prompt-modal" aria-hidden="true" tabindex="-1"
role="dialog" aria-labelledby="alert-modal-header" aria-describedby="alert-modal-body">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="reading-area" role="document">
<div class="lemonade-title">
<div class="lemonade-logo"> </div>
</div>
<div class="modal-icon"> </div>
<h2 class="modal-header hidden" id="alert-modal-header"></h2>
<div class="modal-body" id="alert-modal-body"> </div>
<hr />
</div>
<div class="modal-footer">
<button class="btn btn-primary ok-btn" aria-label="ok" role="button" data-
dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<div id="lm-confirm" class="modal fade lm-prompt-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="lemonade-title">
<div class="lemonade-logo"> </div>
</div>
<div class="modal-icon"> </div>
<h2 class="modal-header hidden"></h2>
<div class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-primary ok-btn" data-dismiss="modal">Ok</button>
<button type="button" class="btn btn-default cancel-btn" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div dir="ltr" class="resize-sensor" style="pointer-events: none; position: absolute; inset:
0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
<div class="resize-sensor-expand" style="pointer-events: none; position: absolute; inset:
0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width:
353px; height: 622px;"> </div>
</div>
<div class="resize-sensor-shrink" style="pointer-events: none; position: absolute; inset:
0px; overflow: hidden; z-index: -1; visibility: hidden; max-width: 100%;">
<div style="position: absolute; left: 0px; top: 0px; transition: all 0s ease 0s; width:
200%; height: 200%;"> </div>
</div>
</div>
</div>
</div>
</div>
<p><a rel="noopener noreferrer" href="/digital-discovery" target="_blank" style="color:
#25a4e1; margin: 0px; padding: 0px; border: 0px;">>>>View more tutorials here.</a>
</p>
<table style="width: 375.25px; height: 52.25px;">
<tbody>
<tr>
<td> <a rel="noopener noreferrer" rel="noopener noreferrer"
href="https://www.renasantbank.com/digital-banking#Online%20Banking" target="_blank"
style="color: #25a4e1; margin: 0px; padding: 0px; border: 0px;">>>>Are you ready to
enroll in online banking?</a></td>
</tr>
<tr>
<td> <a rel="noopener noreferrer" href="/digital-discovery" target="_blank"
style="color: #25a4e1; margin: 0px; padding: 0px; border: 0px;">>>>View more
tutorials here.</a></td>
</tr>
</tbody>
</table>
<div id="box">
<header>
</header>
<div id="player">
</div></div></div></div></div></div></div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。