JavaScript/JQuery 在 Cordova 中为 iframe 启用后退按钮行为

JavaScript/JQuery Enable backbutton behaviour for a iframe in Cordova

本文关键字：按钮 启用 iframe JQuery Cordova 中为 JavaScript      更新时间：2023-09-26

我正在科尔多瓦开发一个Webview应用程序。此网络视图应用程序具有 iframe，我在其中显示来自我网站的内容。我的网络视图应用程序的布局，黑色部分是 iframe

<body style="background-color: #f8f8f8">
<div id="web_container">
    <iframe id="main_content"
        src="https://www.mycollegepicks.in/home"
        style="margin: auto auto; overflow: hidden; border: 1px solid #f8f8f8"></iframe>
</div>
<div id='error' style='display: none'></div>
   <div id="menu_wrapper" style="min-height: 40px">
    <div>
        <img class="menu_item_img" src="img/home.png"
            style="width: 36px; padding: 2px;" id="home_btn">
    </div>
    <div>
        <img class="menu_item_img" src="img/arrow_left.png"
            style="width: 36px; padding: 2px;" id="back_btn">
    </div>
    <div>
        <img class="menu_item_img" src="img/refresh.png"
            style="width: 36px; padding: 2px;" id="reload_btn">
    </div>
    <div>
        <img class="menu_item_img" src="img/arrow_right.png"
            style="width: 36px; padding: 2px;" id="forward_btn">
    </div>
    <div>
        <img class="menu_item_img" src="img/shut_down.png"
            style="width: 36px; padding: 2px;" id="logout_btn">
    </div>
</div>
</div>

我写了以下JS-

$( "#logout_btn" ).click(function() {
  showToast('Logging Out', 'info');
  console.log("Logout Button Clicked");
  logout_user();
});
$( "#reload_btn" ).click(function() {
  showToast('Reloading Page', 'info');
  console.log("Reload Button Clicked");
  $( '#main_content' ).attr( 'src', function ( i, val ) { return val; });
});
$( "#home_btn" ).click(function() {
  console.log("Home Button Clicked");
  $( '#main_content' ).attr( 'src','https://www.mycollegepicks.in/home?app=1&tab_type=home');
});
$( "#back_btn" ).click(function() {
  console.log("Back Button Clicked");
  iFrameHistory = document.getElementById("main_content").contentWindow.history.length;
  if(iFrameHistory)
    document.getElementById('main_content').contentWindow.history.back();
  writeLog("iFrameHistory "+iFrameHistory);
  PopeyeLogger('Iframe History Length '+iFrameHistory,'info');
});
$( "#forward_btn" ).click(function() {
  console.log("Forward Button Clicked");
  iFrameHistory = document.getElementById("main_content").contentWindow.history.length;
  if(iFrameHistory)
    document.getElementById('main_content').contentWindow.history.forward();
  writeLog("iFrameHistory "+iFrameHistory);
  PopeyeLogger('Iframe History Length '+iFrameHistory,'info');
});

但是单击后退按钮会重定向到上一页而不是 iframe 页面后退。

注意：在iframe中，每个页面都通过ajax加载和更改。在每个 ajax 上，我们将 url 推送到浏览器状态。

我遇到了同样的问题，对我有用的解决方案是一个简单的技巧。将 ：

   <a data-rel="back" data-icon="back">back</a>
by
    <a data-id="persistent" href="the page_before" data-transition="slide" data-icon="back"> back</a>

它工作正常

相关文章：