1

I am working on a form and I have to show the preview of an url like facebook.Since i am new in angularJS, I don't have much idea. If you know any angular api or library. Please let me know. So i can do more research on that.

rahul
  • 383
  • 1
  • 8
  • 20

1 Answers1

1

You can inject the $sce service into the controller and trustAsResourceUrl the url

In controller

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

and in View, using iframe

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

So the complete code can be 

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

You can visit my plnkr for reference.

Rebornix
  • 5,272
  • 1
  • 23
  • 26
  • I have written the follwing code but its not working
    – rahul Feb 04 '15 at 14:38
  • 1
    @rahul check my update. I have created a plnkr demo for your reference. Your code doesn't work because `facebook.com` doesn't allow loading the site in iframe, it throws `facebook.com set 'X-Frame-Options' to 'DENY'.` error message. Google and Stackoverflow only allow them being loaded in the same domain. However `angular.org` set no restriction on this. I suppose my answer already fixed your problem. But for `x-frame-options deny` error, it's totally another subject. – Rebornix Feb 05 '15 at 01:37
  • Thanks bro. It works but i want only logo and tagline from any url like facebook. I mean that when we paste any url on facebook it will atomatically attach an img and some text of that url. DO you any libray for this one? – rahul Feb 06 '15 at 03:32
  • I got what you mean, what you want to is fetching specific content from target url like headers(title, author), images, etc. Personally I suggest handle this in backend, but if you really want to handle this in JS, you can fetch content from url using $http/Jqury ajax then parse it as [this topic](http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements) does. – Rebornix Feb 06 '15 at 06:48