web-dev-qa-db-ja.com

AngularJSでiFrameを使用する

Angular 1.2+を使用して、iFrameを読み込むための「角度のある」方法を試していますが、これに関するチュートリアルや実際の議論はどこにもありません。

基本的に、リンクのリストを表示する検索ページがあります。リンクをクリックすると、検索結果を表示したままiFrameにデータを読み込む（おそらく$ httpサービス経由で）コントローラーの関数を呼び出す必要があります。

ここにいくつかの初歩的なコードがあります（これまでまったくiFramesを使用したことがないので、これがまったく間違っている場合はおologiesびします）

表示

<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に移動します。

javascriptangularjsiframe
11
JVG

同じオリジンポリシー のため、XMLHttpRequestを使用してクロスドメインデータを取得することはできません。

あなたが本当にやりたいことを私はよく知りません。

ユーザーが気に入ったWebページを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 demo

ところで...あなたが本当にXMLHttpRequestを使用してサードパーティのWebサイトからデータを取得してどこかにダンプしたい場合は、サーバープロキシを試すことができます（iframe src属性にデータをダンプすることはできません！WebページのURLのみを受け入れます）。

8
Chickenrice

AngularJS 1.2に関しては、$sceサービスを使用する必要があります。

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

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

幸運を...

16
TidharPeer

St iframe.srcに通常のdomを使用するだけで本当に苦労しました。 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
httpete

別の例とともに、さらに明確化が必要だと思います。

$ 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>
3
Tom Stickel