Question

我需要在AngularJS中动态iframe各种html页面，然后更改其html内容的部分内容。我已经创建了一个指令，它的iframe很好但我的问题是我无法像在jQuery中那样访问iframed页面的内容！我也不能使用jqLite这样做！有人可以帮忙吗？

以下是该指令的外观

myApp.directive('pageiframe', ['$scope','$location', function($scope,$location) {
    var src=  some URL // I get this somehow
    return {
        restrict: 'C',
        replace: true,
        template: "<iframe src="+src+" height='2000px' width='100%' frameborder='0'></iframe>",
        link: function(scope, elem, attrs) {
        var targetIframe=elem[0] // here we get the iframe but then i can't change its html content 
        elem.contents().find('#element').html('change') // this doesn't work!
        }
      }
    }])

p.s我已经将jQuery链接放在主页的顶部，而其他地方我可以使用它就好了！

Answer 1

与使用document.ready或window.onload类似，在加载之前无法访问iframe文档的内容。

link: function(scope, elem, attrs) {
    elem.on('load', function(){
       elem.contents().find('#element').html('change') ;
    }
}

更改Angularjs中iframed页面的内容

1 个答案: