0

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

任何帮助深表感谢。谢谢！

4

1 回答 1

0

终于让它适用于 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 中滚动！

于 2018-01-26T01:59:37.170 回答