Question

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

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

Answer 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.width="98%"
      iframe.style.height="500px"
      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。

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

1 个答案: