AngularJS中$http获取HTML文档无法在iframe渲染的问题

你遇到的核心问题是对AngularJS的$sce服务和ng-src指令的用法误解，以及iframe加载逻辑的错误处理：

1. $sce.trustAsHtml的误用：ng-src指令需要的是可信的资源URL，而$sce.trustAsHtml是用于将HTML内容绑定到元素（如ng-bind-html），直接把HTML文本赋值给ng-src会让iframe尝试加载一个无效的地址，导致无内容甚至应用崩溃。
2. data URI的白名单问题：data:text/html协议不在你配置的$sceDelegate白名单中，所以即使请求URL已被允许，data URI仍会被拦截，同时你之前用escape处理内容也不够规范。

方案一：直接将HTML内容写入iframe文档（推荐） #

既然已经通过$http.get拿到了完整的HTML内容，直接操作iframe的DOM写入内容是最可靠的方式，无需处理URL白名单和$sce的URL信任问题：

1. 修改模板HTML #

去掉ng-src，保留iframe的ID：

<iframe id="eventIframe" style="width:100%;height:100%;"></iframe>

2. 修改控制器代码 #

获取iframe元素后，直接写入HTML内容：

eventService.eventShow($scope.club.ceID)
.then(function(res) {
  if (res.success == true) {
    console.log(res.data);
    // 获取iframe及其文档对象
    var iframe = document.getElementById('eventIframe');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    
    // 写入HTML内容
    iframeDoc.open();
    iframeDoc.write(res.data);
    iframeDoc.close();
    
    $scope.eventItem.isLogin = 1;        
  }
});

方案二：使用data URI并修正$sce配置 #

如果一定要用ng-src绑定的方式，需要修正$sce的白名单配置和内容处理方式：

1. 更新$sceDelegate白名单 #

添加data:**协议到白名单：

.config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    'self',
    'https://api.example.com/v1/**',
    'data:**' // 允许所有data协议的URI
  ]);
})

2. 修改控制器代码 #

使用$sce.trustAsResourceUrl（而非trustAsHtml）处理data URI，同时用encodeURIComponent替代escape（对Unicode支持更好）：

eventService.eventShow($scope.club.ceID)
.then(function(res) {
  if (res.success == true) {
    console.log(res.data);
    // 生成合法的data URI并标记为可信资源URL
    var dataUri = "data:text/html;charset=utf-8," + encodeURIComponent(res.data);
    $scope.eventItem.url = $sce.trustAsResourceUrl(dataUri);
    
    $scope.eventItem.isLogin = 1;        
  }
});

3. 保持模板不变 #

<iframe id="eventIframe" ng-src="{{eventItem.url}}" style="width:100%;height:100%;"></iframe>

方案对比 #

• 直接写入iframe：无URL长度限制，无需修改安全配置，适合大体积HTML内容；唯一缺点是需要直接操作DOM，符合当前场景需求。
• data URI方案：可以保留ng-src绑定逻辑，但有内容长度限制（不同浏览器限制不同），且需要放宽安全策略，适合小内容场景。

内容的提问来源于stack exchange，提问作者rolinger