angularjs ng-bind-html 到 iframe 正在渲染 <html> 标签之外的 HTML

问题描述 投票:0回答:1

我正在将页面从 $http.get 加载到 iFrame 中。 $http.get 检索完整的 HTML 页面,就好像它是本机导航到的一样,但是当我将内容附加到 iframe 时,内容将加载到 HTML 标记之外......以及检索到的原始 HTML 标记文件现已丢失。

控制器:

  // call to $http.get() service
  clubService.eventShow($scope.club.ceID)
  .then(function(res) {
    if (res.success == true) {
      $scope.eventItem.urlHTML = $sce.trustAsHtml(res.data);
      $scope.eventItem.isLogin = 1 ;        
    }
  }) ;

HTML:

  <iframe id="eventFrame" ng-bind-html="eventItem.urlHTML" style="width:100%;height:100%;"> </iframe> 

渲染到页面的是:

<iframe id="eventFrame" ng-bind-html="eventItem.urlHTML" style="width:100%;height:100%;" class="ng-binding">
   #document
      <html>
         <head></head>
         <body></body>
      </html>

   // HERE IS WHERE IMPORTED HTML IS ATTACHED:
   //
   // <!DOCTYPE html>, <HTML> and <BODY> tags are stripped
   //    ...but they are in the raw response, visible in the chrome dev tools network session
   //
   // All the below html is NOT a child of #document either, its at the same level.
   <meta ...>
   <link ...>
   <script> ...</script>
   <main>
     .... all the page code
   <main>

</iframe>

如何将加载的 HTML 文档正确附加到我的 iframe?

javascript angularjs dom iframe xmlhttprequest
1个回答
0
投票

我花了一段时间才发现,除了我如何将 HTML 文档附加到 iFrame 之外,一切都是正确的:

我将 iframe 更改为:

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

致:

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

一切都很完美

© www.soinside.com 2019 - 2024. All rights reserved.