如何使用AngularJS检索外部网站的内容(一个元素一个元素)

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

本文关键字：元素 一个 AngularJS 何使用 检索 外部 网站      更新时间：2023-09-26

我正在开发一个新的AngularJS应用程序。我希望有一些类似于JSOUP的功能，但是在AngularJS上。

问题:

  • 如何获取外部网站的HTML代码?
  • 我如何分割他们的"元素"(即:div, span等…)?

我尝试使用$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…

我希望你能帮助我，谢谢你

好主意。

但如果你必须…

注意:这只是为了开发的目的，我的解决方案，不会，也不应该，在你的机器上工作。

我将从在iframe元素中注入HTML开始。

然后遍历iframe html树查找内容。

index . html 

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

app.js 

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

有关$sce的更多信息，请参见如何从AngularJS中的变量设置iframe src属性

现在剩下的就是等待加载iframe内容，然后遍历它。

<<p>继续strong> app.js 
myFrame= document.getElementsByTagName('iframe');
myFrame.load = function(e){
  myDiv = myFrame.document.getElementById("ContenuPrincipal_BlocA1_m_oCity");
  alert(myDiv.innerHTML);
 }

现在要使其工作，您必须重写同源策略。(一种方法是在hosts文件中编写自己的行…或chrome with flag)

相关文章：