在AngularJS中使用iFrame

Question

使用Angular 1.2+,我正在尝试在iFrame中加载一个"有角度"的方式,但我无法在任何地方找到任何教程/任何真正的讨论.

基本上,我有一个显示链接列表的搜索页面.单击一个链接应调用我的控制器中的一个函数,该函数将数据(可能通过$ 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>

调节器

$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/whatever.

Answer 1

至于AngularJS 1.2,您应该使用该$sce服务:

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

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

祝好运...

Answer 2

由于同源策略,您无法使用XMLHttpRequest获取跨域数据.

我不太确定你真正想做什么.

您可以尝试绑定iframe src属性并单击链接URL以实现该功能,如果您只想让iframe显示用户cliked的网页.

我写了一个简单的例子:

HTML

<div ng-app ng-controller="searchPage">
  <div ng-repeat="page in searchResults">
      <a ng-click="itemDetail(page._infoLink)">{{page.label}}</a>
  </div>
  <iframe width="500" height="400" ng-src="{{detailFrame}}"></iframe>
</div>

JS

function searchPage($scope){
  $scope.searchResults = [{label:"BBC",_infoLink:"http://www.bbc.co.uk/"},{label:"CNN",_infoLink:"http://edition.cnn.com/"}];

  $scope.itemDetail = function(link){
      $scope.detailFrame = link;
  };
}

这是jsFiddle演示

BTW ...如果你真的想使用XMLHttpRequest从三方网站获取数据并将其转储到某个地方(你不能将数据转储到iframe src属性,你可以尝试服务器代理!它只接受网页的URL ).