How to retrieve content (element by element) of a external website using AngularJS

Question

I am working on a new AngularJS app. I would like to have something similar to JSOUP functionality but on AngularJS.

Questions :

How can I get HTML code of a external website ?
How can I split them by "elements" (i.e : div, span etc...)?

I tried to use $http.get in app.js:

$scope.test = function(){
    $http.get("https://www.civiweb.com/FR/offre/71087.aspx").success(function(data){
        $scope.test = data;
    })
    .error(function(data){
      console.log("Error getting HTML : "+data);
    });

  }

index.html

<div>{{test}}</div>

Not working ...

I hope you can help me, Thank you

Will not work. You need CORS or JSONP (only GET) activated to receive data via cross origin. Please add your full view.
{{test}}
is not enough. — lin, May 30 '15 at 13:18
Thank you, I will go for a native app on Android by using JSOUP — Rajesh.S, May 30 '15 at 14:01

score 0 · Accepted Answer · edited May 23 '17 at 12:30

Terrible idea.

But if you must...

note: this is for development purposes only, and my solution, will not, and should not, work on other machine but yours.

I would start by injecting the HTML inside a iframe element.

Then traverse the iframe HTML-tree for content.

index.html

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

app.js

var init = function($scope, $sce){
  $scope.remoteUrl = $sce.trustAsResourceUrl("http://example.com");
}

for more information about $sce please refer to How to set an iframe src attribute from a variable in AngularJS

now all is left is to wait for loading the iframe content, and then traverse it.

continue app.js

myFrame= document.getElementsByTagName('iframe');
myFrame.load = function(e){
  myDiv = myFrame.document.getElementById("ContenuPrincipal_BlocA1_m_oCity");
  alert(myDiv.innerHTML);
 }

Now for this to work, you must override the Same-origin policy. (one way is the write your own line in your hosts file... or chrome with flag)

Ok thank you, Then I will go for a native app. By using common JSOUP on Android :) — Rajesh.S, May 30 '15 at 14:00

How to retrieve content (element by element) of a external website using AngularJS

1 Answers1