11

を使用Angular 1.2+して、iFrameにロードする「角度のある」方法を考え出そうとしていますが、これに関するチュートリアルや実際の議論はどこにもありません。

基本的に、リンクのリストを表示する検索ページがあります。リンクをクリックすると、検索結果を表示したまま iFrame に (おそらく $http サービスを介して) データをロードするコントローラーの関数が呼び出されます。

ここにいくつかの基本的なコードがあります（これまで実際に使用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でどのように達成できますか?

mydomain.com/cloakinglink追加の警告: iFrameにロードするリンクはアフィリエイト リンクであるため、多くの場合、それらの間に「仲介者」ドメインがあり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

Same Origin Policyにより、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のデモがあります

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

于 2013-11-07T07:24:44.787 に答える
4

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>
于 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 に答える