Question

问题 -

如何将特定div从外部网站加载到iframe中？我知道同源政策和外部网站属于我。我如何在AngularJs中做到这一点。

我找了这个，但大多数答案只在jQuery中。

感谢您的帮助

更新1

让我更具体一点。例如，如果您使用iframe，它可以让您访问所有内容。但我只想要这个外部URL的特殊DIV。

<iframe style="border: 0" width="800" height="600" frameborder="0" scrolling="no" src="http://localhost:8888/">

Answer 1

通常情况下，使用jQuery盲目且不加思索地使用Angular不会很好。这不是因为jQuery - 库，而是因为Angular和jQuery推广不同的编程范例。

尽管如此，jQuery是一个工具箱，其中一个工具是jQuery.load()。

在我看来，让它与Angular一起使用的最好方法是创建一个使用jQuery.load()的指令：

.directive("load", function($compile){
  return {
    restrict: "A",
    scope: true,
    link: function(scope, elem, attrs){

      attrs.$observe('load', function(newValue){
        elem.load(newValue, null, function(){

          // compile the newly imported div
          $compile(elem.contents())(scope);

          // need to force $digest, since this is outside of Angular digest cycle
          scope.$digest();
        });
      });
    }
  };
});

然后你可以像这样使用它：

<div load="foo.html #id"></div>

，或者

<div load="{{urlWithId}}"></div>

确保在Angular之前加载jQuery，否则将不会定义.load。

Plunker

在AngularJs中从外部站点加载iframe中的特定div

1 个答案: