在 iframe 中将 HTML $scope 变量显示为内容

Posted 2023-05-09

【中文标题】在 iframe 中将 HTML $scope 变量显示为内容

【英文标题】：display HTML $scope variable in iframe as content

【发布时间】：2017-01-30 00:20:39

【问题描述】：

我想在 iframe 中显示 Angular 1.2 中的一些 html，但我没有 URL，而是将内容放在变量中。如何显示？

$scope.serverMessage = $sce.trustAsHtml(data);
$scope.switchMessage('serverError'); // this displays a modal with iframe in it

【参考方案1】：

我为此做了一个指令......它非常丑陋，但如果你愿意，你可以了解要点并清理它。

.directive('dynamicIFrame', function($document)
  return 
    restrict:'E',
    scope:
      html:"="
    ,
    link:function(scope, iElem, iAttr)
      // Create an IFrame and add it to the current element
      var iframe = $document[0].createElement("iframe");
      iframe.style.
      iframe.style.
      iElem.append(iframe);

      // Do some things to get a DOM Document out of the iframe
      var doc = iframe.document;
      if(iframe.contentDocument)
        doc = iframe.contentDocument;
      
      else if(iframe.contentWindow)
        doc = iframe.contentWindow.document;
      

      // watch whatever gets passed into here as HTML so the
      // iframe contents will just update if the HTML changes

      // uses lodash's debounce function to delay updates by 250ms
      scope.$watch('html', _.debounce(function(newVal,oldVal)
          console.log('html changed')
          if(!newVal)
            return;
          doc.open();
          doc.writeln(newVal);
          doc.close();
        , 250),
        true);

    
  
)

你会像这样使用它

<dynamic-i-frame html="someVarWithHTMLInIt"></dynamic-i-frame>

还可能注意到这并没有对其写入文档的信息进行任何验证，因此如果这是用户可以输入数据的地方，那么网站上将显示您可能希望使用某些组件进行研究（ s) 的 $sce 也在这里。