在AngularJS中使用iFrame [英] Using iFrames in AngularJS

问题描述

使用 Angular 1.2 + ，我正在尝试以角度的方式加载iFrame，但我找不到任何教程/任何真正的讨论在这个任何地方。

Using Angular 1.2+, I'm trying to work out an "angular" way to load in an iFrame but I can't find any tutorials/any real discussion on this anywhere.

基本上，我有一个显示链接列表的搜索页面。单击链接应该调用我的控制器中的一个函数，该函数将数据（可能通过$ http服务？）加载到iFrame，同时保持搜索结果在视图中。

Basically, I have a search page which displays a list of links. Clicking a link should call a function in my controller which loads in data (possibly through the $http service?) to an iFrame while keeping the search results in view.

这里是一些基本代码（我从来没有真正使用过 iFrames ，如果这完全错误就道歉了）

Here's some rudimentary code (I've never really used iFrames before so apologies if this is just totally wrong)

查看

<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将在外部网站（在不同的域中）加载到页面的大部分内容。

Something simple along these lines would be ideal. In the (attempted) example above, the search results would stay on the screen and get pushed into a sidebar, while the iFrame loads in an external site (on a different domain) into the bulk of the page.

如何通过Angular实现这一目标？

How can this be achieved with Angular?

额外警告：加载到iFrame的链接是联盟链接，所以他们经常会这样做他们之间有一个'中间人'域，例如点击链接将是 mydomain.com/cloakinglink ，重定向到 www.zanox.com/whatever 然后引导到最后的网站， www.asos.com/whatever 。

Extra caveat: The links to load into the iFrame are affiliate links so they'll often have a 'middleman' domain between them, e.g. the clicked-link will be mydomain.com/cloakinglink which redirects to www.zanox.com/whatever which then leads to the final site, www.asos.com/whatever.

推荐答案

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

Due to Same Origin Policy, you can't get cross domain data by using XMLHttpRequest.

我不太确定您真正想要的是什么

I'm not quite sure that what you really want to do.

你可以尝试绑定iframe src属性并单击链接url以实现该功能，如果你只想让iframe显示用户cliked的网页。

You could try to bind iframe src attribute and clicked link url together to achieve the function if you just want iframe to show the web page which user cliked.

我写了一个简单的例子：

I wrote a simple example:

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

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

BTW... You could try server proxy if you really want to use XMLHttpRequest to grab data from 3-party web site and dump it to somewhere (You can't dump data to iframe src attribute! It only accepts the URL of web page).

这篇关于在AngularJS中使用iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！