Question

我正在尝试构建此目录类型的应用程序，我正在使用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>

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

Answer 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中滚动！

如何在Android原生应用程序的父窗口中打开iframe链接？

1 个答案: