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

Question

我正在开发一个新的 AngularJS 应用程序。我想要有一些类似于 JSOUP 功能但在 AngularJS 上的东西。

问题:

• 如何获取外部网站的 HTML 代码？
• 如何按“元素”(即:div、span 等...)拆分它们？

我尝试在 app.js 中使用 $http.get:

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

不工作...

希望您能帮助我，谢谢

Answer 1

糟糕的主意。

但如果你必须...

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

我首先将 HTML 注入(inject) iframe 元素内。

然后遍历 iframe HTML 树以获取内容。

index.html

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

app.js

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

有关 $sce 的更多信息请引用How to set an iframe src attribute from a variable in AngularJS

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

继续app.js

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

现在要使其发挥作用，您必须覆盖同源策略。(一种方法是在主机文件中编写自己的行...或带标志的 chrome)