Question

当我想在动态生成的iframe源中访问DOM元素时，我被浏览器阻止访问它，就像我从不同位置加载iframe的情况一样。有没有办法告诉iframe元素它的＆＃39; src＆＃39;属于家酿吗？在代码中：

在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的来源设置为＆＃39; about：blank＆＃39;然后将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元素。但是，它有效。

生成的iframe源仍然会阻止对角度中的iframe的访问

1 个答案: