Angular JS 中的 URL 实时预览答案

【问题标题】：URL live preview in Angular JSAngular JS 中的 URL 实时预览
【发布时间】：2015-04-04 02:20:18
【问题描述】：

我正在处理一个表单，我必须显示像 facebook 这样的 url 的预览。因为我是 angularJS 的新手，所以我不太清楚。如果您知道任何角度 api 或库。请告诉我。所以我可以对此做更多的研究。

【问题讨论】：

【解决方案1】：

您可以将 $sce 服务注入控制器并信任AsResourceUrl url

在控制器中

function AppCtrl($scope, $sce) {
      $scope.currentUrl = $sce.trustAsResourceUrl("http://facebook.com");
    }
}

在视图中，使用 iframe

<iframe ng-src="{{currentUrl}}"> </iframe>

所以完整的代码可以是

<html>
<header>
  <!-- Angular -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</header>
<body ng-app="myapp"> 
<div ng-controller="AppCtrl">
<iframe ng-src="{{currentUrl}}"> </iframe> 
</div>
<script> 
var myapp = angular.module('myapp',[]);
myapp.controller('AppCtrl',function($scope,$sce){ 
$scope.currentUrl = $sce.trustAsResourceUrl("https://docs.angularjs.org"); });
</script>
</html>

您可以访问我的plnkr 以供参考。

【讨论】：

我已经编写了以下代码，但它不起作用
@rahul 检查我的更新。我创建了一个 plnkr 演示供您参考。您的代码不起作用，因为 facebook.com 不允许在 iframe 中加载网站，它会抛出 facebook.com set 'X-Frame-Options' to 'DENY'. 错误消息。 Google 和 Stackoverflow 只允许在同一个域中加载它们。但是angular.org 对此没有任何限制。我想我的回答已经解决了你的问题。但是对于x-frame-options deny 错误，这完全是另一个话题。
谢谢兄弟。它有效，但我只想要来自任何网址（如 facebook）的徽标和标语。我的意思是，当我们在 facebook 上粘贴任何 url 时，它会自动附加一个 img 和该 url 的一些文本。你有这个库吗？
我明白了你的意思，你想要的是从目标 url 获取特定内容，如标题（标题、作者）、图像等。我个人建议在后端处理这个，但如果你真的想要要在 JS 中处理此问题，您可以使用 $http/Jqury ajax 从 url 获取内容，然后将其解析为 this topic 所做的。