如何在 android 本机应用程序的父窗口中打开 iframe 链接？答案

【问题标题】：How do I open iframe links in parent window on android native app?如何在 android 本机应用程序的父窗口中打开 iframe 链接？
【发布时间】：2018-07-05 08:57:27
【问题描述】：

我正在尝试构建这种目录类型的应用程序，并且我正在使用 iframe 将其他网站嵌入到应用程序中。我还希望在父窗口中打开嵌入网站的链接。使用 Progressive Web 应用程序版本，效果很好，并且不会重定向到外部页面。使用 Native 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>

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： android html angularjs web progressive

【解决方案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 中滚动！

【讨论】：