Error of the back button if load cordova.js in iframe

ionic-v1
1

Hi,

I’ve met a problem of cordova using ionic. I want to create a multi-page application in android, but because of a technical problem, I can’t use ion-nav in my application. I used iframe to include different pages. I created a base page in index.html, and used iframe to turn to other pages. But when I included the lib cordova.js in index.html and the pages in iframe, I had a error when I click the back button:

Uncaught Error: Java exception was raised during method invocation cordova.js:927
androidExec cordova.js:927
module.exports.exitApp cordova.js:1628
(anonymous function) ionic.bundle.js:2347
ionic.Platform.ready ionic.bundle.js:2117
ionic.Platform.exitApp ionic.bundle.js:2346
(anonymous function) app.js:13
self.hardwareBackButtonClick ionic.bundle.js:43931
Channel.fire cordova.js:806
(anonymous function) cordova.js:224

And the back button cannot work.
When I delete the lib in iframe, it works well. It seems like we cannot include cordova.js two times both in index.html and in the iframe pages. But we can’t use cordova features in iframe page if we don’t add it.

Here is my code:
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body id="appMain" ng-app="appMain" ng-controller="AppCtrl" ng-init="init()">
    <ion-side-menus>
        <ion-side-menu-content>
            <div><button class="button button-icon icon ion-navicon" ng-click="toggleLeft()">
            </button></div>
            <iframe id="app" width="100%" height="90%" src="{{src}}"></iframe>
        </ion-side-menu-content> 
        
        <ion-side-menu side="left">
          <ion-header-bar class="bar-stable">
            <h1 class="title">Menu</h1>
          </ion-header-bar>
          <ion-content>
          <ul class="list">
              <li class="item" ng-click="toOne()">
                POC #1
              </li>
          </ul>
          </ion-content>
        </ion-side-menu>
      </ion-side-menus>  
  </body>
</html>

app.js: the controller of page index.html

    angular.module('appMain', ['ionic'])
    
    .run(function($ionicPlatform) {
      document.addEventListener('backbutton', function(event){
        $ionicPlatform.registerBackButtonAction(function(e){
              if(true){
                 e.preventDefault();
                 ionic.Platform.exitApp();
             }
             else {
                 navigator.app.backHistory()
             }
          }, 100);
      });
    })

.controller('AppCtrl', function($scope, $ionicSideMenuDelegate) {

  var oneUrl = "templates/poc1.html";

  $scope.init = function(){
    $scope.src = oneUrl;
  };

  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };

  $scope.toOne = function(){
    $ionicSideMenuDelegate.toggleLeft();
    $scope.src = oneUrl;
  }

})

poc1.html: in iframe of index, and aime to add a tab into the page

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>POC #1</title>
    <link href="../lib/ionic/css/ionic.css" rel="stylesheet">
    <script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
    <!--<script src="../cordova.js" type="text/javascript"></script>-->
    <script src="../js/tab.js"></script>
  </head>
  <body ng-app="tabApp" ng-controller="poc1Ctrl">
    <ion-tabs class="tabs-default tabs-icon-top">

      <ion-tab title="test1" icon="ion-home">
        <iframe width="100%" height="100%" src="{{src1}}"></iframe>
      </ion-tab>
      <ion-tab title="test2" icon="ion-home">
        <iframe width="100%" height="100%" src="{{src2}}"></iframe>
      </ion-tab>

    </ion-tabs>
  </body>
</html>

tab.js: controller of poc1.html

angular.module('tabApp', ['ionic'])

.config(['$ionicConfigProvider', function($ionicConfigProvider) {

	$ionicConfigProvider.tabs.position('bottom'); //other values: top

}])

.controller('poc1Ctrl', function($scope, $ionicTabsDelegate) {
	$scope.src1="test1.html";
	$scope.src2="test2.html";
});

test1.html: content in iframe of poc1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<script src="../cordova.js"></script>
</head>
<body>
                    test<input></input>
<script src="../cordova.js" type="text/javascript"></script>
</body>
</html>

Thanks a lot for giving me any ideas.

1 Like
2

@huyue89ac, Did you got any solution for the issue