Question

使用Angular 1.2+，我试图找出一个＆＃34; angular＆＃34;在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

由于Same Origin Policy，您无法使用XMLHttpRequest获取跨域数据。

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

您可以尝试绑定iframe src属性并单击链接网址以实现此功能，如果您只是希望iframe显示用户所访问的网页。

我写了一个简单的例子：

<强> 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 demo

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

Answer 3

在使用常规dom到st iframe.src时真的很挣扎。 Grr ...... Angular将光线向它弯曲。

 .state('nav.iframer', {
            url: '/iframer',
            templateUrl: 'app/dashboard/iframer.html',
            controller: function($rootScope, $sce){


                    var f = window.frames.iframer;//
                    this.frameUrl= $sce.trustAsResourceUrl("http://www.google.com");


            },

            controllerAs: 'framed'
        })

模板：

<iframe name="iframer" width="900" height="900" ng-src="{{framed.frameUrl}}"></iframe>

Answer 4

我认为需要进一步澄清以及另一个例子。

$ sce是您必须注入的服务。它不是自动包含的原因是性能的开销，你当然希望只能加载你需要的服务。

$ sce.trustasResourceURL因此很重要

示例：

angular.module('tips')

.controller('TipsCtrl',

function ($http, $scope, UserService, $location, $routeParams, Categories, Tip, error, $sce) {  
    // various code  
    $scope.detailFrame = $sce.trustAsResourceUrl("http://localhost:17308/Home/Index/2"); //hard coded
})

然后是IFrame：

<iframe ng-src="{{detailFrame}}" align="middle" width="1000" height="800" frameborder="0">
    <p>Your browser does not support iframes.</p>
</iframe>

在AngularJS中使用iFrame

4 个答案: