How do I open iframe links in parent window on android native app?

Question

I'm trying to build this directory type of app and I'm using iframe to embed other sites into the app.I'd also like the links of the embedded sites to open within the parent window. With the Progressive web app version, this works great and there are no redirections to external pages. With the Native android version, the iframe links are redirected back to the original web site.

Here is the code.

var app = angular.module('bible', []);

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('iframeDirective', ['$sce', function($sce) {
  return {
    restrict: 'E',
    template: '<iframe src="{{ trustedUrl }}" frameborder="0" allowfullscreen></iframe>',
    link: function(scope) {
      scope.trustedUrl = $sce.trustAsResourceUrl("https://www.bible.com/bible/100/JHN.3");
    }
  }
}]);

*{margin:0;padding:0}
html, body {height:100%;width:100%;-webkit-overflow-scrolling:touch;position:fixed; overflow:auto;}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
iframe {height:100%;width:100%}

.header {border-bottom:1px solid #000}
.content {height:100%}

<!DOCTYPE html>
<html ng-app="bible">

  <head>
    <meta charset="utf-8" />
    <title>Bible app</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js" data-semver="1.2.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <iframe-directive></iframe-directive>
  </body>

</html>

Any help is much appreciated. Thank you!

score 0 · Answer 1 · answered Jan 26 '18 at 01:59

Finally got it to work for Android replacing iframe with object data:

<!DOCTYPE html>
<html>
<head>
<title></title>

</head>
<body>
<object data="https://www.bible.com/bible/100/JHN.3" width="100%" height="700" type="text/html">
    Alternative Content
</object>
</body>
</html>

Fully functional in Android! Downside is that it doesn't scroll in IOS yet!

How do I open iframe links in parent window on android native app?

1 Answers1