javascript - 在 AngularJS 中使用 iFrame

Question

使用 Angular 1.2+，我正在尝试制定一种“有 Angular ”的方式来加载 iFrame，但我在任何地方都找不到任何教程/任何真正的讨论。

基本上，我有一个显示链接列表的搜索页面。单击链接应调用我的 Controller 中的函数，该函数将数据(可能通过 $http 服务？)加载到 iFrame，同时保持搜索结果可见。

这是一些基本代码(我之前从未真正使用过 iFrames，如果这完全错误，我深表歉意)

查看

<div ng-controller="searchPage">
  <div ng-repeat='post in searchResults'>
    <a ng-click="itemDetail(post._infoLink)">Here's a link!</a>
  </div>
  <div class="detailView" ng-show="itemShown">
    <iframe ng-src="detailFrame"></iframe>
  </div>
</div>

Controller

$scope.itemDetail = function(link){
  $scope.itemShown = true;
  $scope.busy = true;
  $http.get(link).success(function(data){
    $scope.busy = false;
    $scope.detailFrame = data;
  });
}

此代码当前给出错误:

 XMLHttpRequest cannot load <url>. Origin http://localhost:5000 is not allowed by Access-Control-Allow-Origin. 

按照这些思路做一些简单的事情是理想的。在上面的(尝试的)示例中，搜索结果将保留在屏幕上并被插入侧边栏，而 iFrame 在外部站点(位于不同域)中加载到页面的大部分内容中。

如何使用 Angular 实现这一目标？

额外警告:加载到 iFrame 的链接是附属链接，因此它们之间通常会有一个“中间人”域，例如单击的链接将是 mydomain.com/cloakinglink，它重定向到 www.zanox.com/whatever，然后指向最终站点 www.asos。 com/随便什么。

Answer 1

对于 AngularJS 1.2，你应该使用 $sce 服务:

<iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>

$scope.detailFrame= $sce.trustAsResourceUrl("http://www.google.com");

祝你好运......