为 iframe 生成的源仍然会阻止以角度访问 iframe

Question

当我想访问动态生成的 iframe 源中的 DOM 元素时，我的浏览器会阻止我访问它，就像从不同位置加载 iframe 的情况一样。有没有办法告诉 iframe 元素它的“src”属性是自制的？在代码中：

在html中：

<div ng-app="myApp" ng-controller="MyController as ctrl">
    <iframe id="my-iframe" ng-src="{{ctrl.renderIframe()}}"></iframe>
</div>

角度：

var myApp = angular.module('myApp', []);

myApp.controller('MyController', ['$sce', function($sce) {

  var self = this;
  var iframeContent = 'data:text/html;charset=utf-8,' + encodeURI(
    '<div id="target">Shoot the target</div>'
  );
  var iframePointer = angular.element('#my-iframe');
  var targetPointer;

  self.renderIframe = function() {
    return $sce.trustAsResourceUrl(iframeContent);
  };

  /* Edit: needed a [0] selector */
  iframePointer[0].onload = function() {
    targetPointer = iframePointer.contents().find('#target');
    targetPointer.text('I shot it');
  };

}]);

Answer 1

在深入挖掘之后，I came across a solution：将 iframe 的来源设置为 'about:blank'，然后将 html 加载到 iframe 的文档正文中。然后你得到：

html:

<div ng-app="myApp" ng-controller="MyController as ctrl" id="myApp">
  <iframe id='my-iframe'></iframe>
</div>

javascript：

var myApp = angular.module('myApp', []);

myApp.controller('MyController', [function() {

  var self = this;
  var htmlString = '<div id="target">Shoot the target</div>';
  var iframePointer = document.getElementById('my-iframe');
  var targetPointer;

  iframePointer.src = 'about:blank';

  iframePointer.onload = function() {

    /* Apply the html */
    iframePointer.contentWindow.document.open('text/html', 'replace');
    iframePointer.contentWindow.document.write(htmlString);
    iframePointer.contentWindow.document.close();

    /* Manipulate html */
    targetPointer = iframePointer.contentWindow.document.getElementById('target');
    targetPointer.innerHTML = 'I shot it';

  };

}]);

我确实不得不求助于香草的东西，所以角度不再与此相关。事实上，它有点违背角度伦理，因为它直接操纵 DOM 元素。但是，它有效。