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

Posted 2023-05-09

【中文标题】为 iframe 生成的源仍然会阻止以角度访问 iframe

【英文标题】：Generated source for iframe still blocks access to iframe in angular

【发布时间】：2017-07-20 18:21:09

【问题描述】：

当我想访问动态生成的 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');
  ;

]);

【问题讨论】：

您是否尝试过使用外部源，只是为了看看它是否有效？

你的意思是仅仅引用像 ng-src="some.other-address.co.uk" 这样的东西？当然可以获取不同的位置，但问题是一样的：禁止尝试使用 javascript 读取/写入 iframe 中的单个元素，因为它的来源不同。

我的意思是不要在 Angular 中动态生成源代码，而是创建一个包含 <div id="target">Shoot the target</div> 的新 HTML 文件，并将其用作同一来源的源代码，然后查看您要执行的操作是否有效。

啊这样。是的，这确实有效，尽管我必须承认我忘记在 onload 事件处理函数之前放置一个 [0] 选择器。再次从生成的 src 中获取它仍然会抛出“来自 'HTMLIFrameElement' 的属性：阻止具有源“localhost”的框架访问跨域框架。”错误。

您是否有需要 iframe 的理由？为什么不直接将 html 附加到主文档？

【参考方案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 元素。但是，它有效。

【讨论】：

您应该考虑使用Creating a Custom Directive 来完成 DOM 工作。并使用Angular's jQLite。