11

使用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。

4

4 回答 4

16

至于 AngularJS 1.2，您应该使用该$sce服务：

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

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

祝你好运...

于 2014-10-27T13:06:57.810 回答
7

由于同源策略，使用 XMLHttpRequest 无法获取跨域数据。

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

如果你只是想让 iframe 显示用户点击的网页，你可以尝试将 iframe 的 src 属性和点击的链接 url 绑定在一起来实现该功能。

我写了一个简单的例子：

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 演示

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

于 2013-11-07T07:24:44.787 回答
4

仅使用常规 dom 来构建 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>
于 2014-12-03T16:51:01.757 回答
3

我认为需要更多说明以及另一个示例。

$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>
于 2015-08-19T17:41:17.183 回答