在 Angularjs 中更改 iframed 页面的内容

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 link 放在主页的顶部，其他地方我可以使用它！

Answer 1

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

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

在 Angularjs 中更改 iframed 页面的内容

change the content of an iframed page in Angularjs

iframe

jquery

angularjs

angularjs-directive

jqlite