在 AngularJS 中使用 iFrame答案

【问题标题】：Using iFrames in AngularJS在 AngularJS 中使用 iFrame
【发布时间】：2013-11-07 05:39:38
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs iframe

【解决方案1】：

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

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

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

祝你好运……

【讨论】：

非常感谢。你节省了我的时间。

【解决方案2】：

由于Same Origin Policy，使用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>

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

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

【讨论】：

你的小提琴有效，但我不明白，不使用 sce 怎么会有效？当我尝试这段代码时它不起作用

【解决方案3】：

仅使用常规 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>

【讨论】：

【解决方案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>

【讨论】：