在 Angularjs 中更改 iframed 页面的内容

Question

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

这是指令的样子

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') ;
    }
}