javascript - AngularJS 不读取 REST 上的 Iframe 元素

Question

我的网页不只读取 Iframe 标记。我不知道为什么。正如我在 postman 上检查的那样，内容发送正确。

这是我从 postman 收到的内容:

 "Conteudo": "<p>Test iframe:</p>\n\n<p><iframe frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso\" width=\"300\"></iframe></p>\n\n<p>&nbsp;</p>\n\n<p>Check it OUt</p>\n",

我不知道为什么 html 上有一些“\”。

但是，当在我的控制台上显示相同的内容时，我收到以下结果:

<p>Test iframe:</p>
<p>
<iframe frameborder="0" height="300" scrolling="no" src="https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso" width="300"></iframe>
</p>

<p>Check it OUt</p>

但是当在 HTML 上显示时，我收到以下空元素:

我对发生的事情有点困惑。谁能向我解释一下为什么我的导航器无法在 html 上呈现响应？

谢谢大家!

Answer 1

您需要通过运行 $sce.trustAsHtml 告诉 Angular 内容是安全的。在绑定(bind) HTML 字符串之前。请参阅下面的代码片段。

angular
  .module('myApp', [])
  .controller('myController', ['$scope', '$sce', function($scope, $sce) {
    $scope.Noticia = {};
    
    var content = "<p>Test iframe:</p>\n\n<p><iframe frameborder=\"0\" height=\"300\" scrolling=\"no\" src=\"https://www.express.co.uk/news/science/923166/space-news-supernova-birth-astronomy-victor-buso\" width=\"300\"></iframe></p>\n\n<p>&nbsp;</p>\n\n<p>Check it OUt</p>\n";
    
    $scope.loadContent = function() {
      $scope.Noticia.Conteudo = $sce.trustAsHtml(content);
    }
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-bind-html="Noticia.Conteudo"></div>  

  <button type="button" ng-click="loadContent()">Load Content</button>
</div>