Как открыть ссылки iframe в родительском окне на родном приложении для Android?

Я пытаюсь создать приложение этого типа каталога и использую iframe для встраивания других сайтов в приложение. Мне также хотелось бы, чтобы ссылки встроенных сайтов открывались в родительском окне. С прогрессивной версией веб-приложения это прекрасно работает, и перенаправлений на внешние страницы нет. В родной версии для Android ссылки iframe перенаправляются обратно на исходный веб-сайт.

Вот код

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>

Буду признателен за любую оказанную помощь. Спасибо!

Источник

1 ответ

Наконец-то он заработал для Android, заменив iframe данными объекта:

<!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>

Полностью функциональный в Android! Недостатком является то, что он еще не прокручивается в IOS!

Источник
Другие вопросы по тегам