【发布时间】：2013-09-24 21:04:34
【问题描述】：
我在 JQM 中的后退按钮有一个相当烦人且不寻常的问题。我已经完成了一切设置和工作，页面转换很好地滑动，后退按钮工作得很好。但是，一旦我在应用程序中加载视频（我正在使用 rel="external"）然后导航回主页，向后滑动过渡在最后一个后退（让我登陆主页的那个）上不起作用然后运行我的菜单轮播的javascript无法加载。这只发生在我加载视频然后尝试使用后退按钮返回菜单后，如果我不加载视频，一切都会正常运行。
奇怪的是，这在 Safari 中不会发生，但在 Chrome 中以及当应用程序打包在 xcode 中并在模拟器中运行时会发生。
我使用自定义图像作为后退按钮，所以我的后退按钮代码如下：
<div data-role="page" id="page1">
<div data-role="header" data-tap-toggle="false" data-position="fixed" class="header" data-id="myheader">
<div id="backarrow">
<a href="javascript:history.back()">
<img src="img/Arrow_Icon_JQuery_Design.png" width="6%" alt=""/>
</a>
</div>
</div>
以及链接到视频的代码：
<div class="watchvidbutton">
<a href="videos/video_1.mp4" rel="external">
<img src="img/Watch_Video_2_JQuery_Icon.png" width="25%" alt=""/>
</a></div>
仅供参考，主页和视频之间只有 3 次跳转。导航结构如下所示：
#page ---> #page1 ---> #page2(video link on this page)
#page2 ----> #page1 ----(broken back button behaviour)---> #page
提前感谢您的任何见解。
【问题讨论】：
-
使用
$.mobile.changePage('home.html')导航到上一页。使用 rel=external 时，JQM 加载页面时不使用 Ajax，因此之前的页面会从 DOM 中删除。 -
这是否适用于自定义图像作为后退按钮？如果是这样，我是否只使用
data-direction="reverse"？ -
是的，给img或按钮一个id，并附加一个click事件监听器。点击后，拨打
$.mobile.changePage('URL', { transition: 'flip', reverse: true }); -
<script>$(function() { $("#changePageButton").click(function() { $.mobile.changePage('#page', { transition: 'slide', reverse: true } ); }); });</script>这解决了过渡问题，谢谢。但是，javascript 未触发的问题仍然存在。如果我在 chrome 中手动调整窗口大小，它会立即触发，这很奇怪。 -
它应该像
$("#changePageButton").on('click', function () { $.mobile.changePage('home.html', { transition: 'slide', reverse: true }); });没有$(function() { });。注意使用#page是不行的，因为它没有加载到DOM中，所以你需要加载.html文件。
标签： javascript jquery jquery-mobile cordova