Angular2动态插入脚本标签

Angular2 dynamically insert script tag

本文关键字：标签 脚本 插入 动态 Angular2      更新时间：2023-09-26

我从服务器内容进入json对象字段，它是html, <style></style>和<script></script>标签，我想这样执行它:

[innerHtml]="content | sanitize"，但<script></script>标签不执行。有可能成功吗?

我的消毒管道是这样的:

import {Pipe} from '@angular/core';
import {DomSanitizationService} from '@angular/platform-browser';
@Pipe({
    name: 'sanitize',
    pure: true
})
export class Sanitize {
    constructor(private sanitizer: DomSanitizationService) {
    }
    transform(html: string) {
        return this.sanitizer.bypassSecurityTrustHtml(html);
    }
}

我知道，在domsanitiationservice中有bypassSecurityTrustScript函数，但我如何在我的情况下使用它?

这不是一个角2的问题，script标签插入通过innerHTML不执行。

如果你有一个包含script标签的html字符串，请这样插入:

const fragment = document.createRange().createContextualFragment(yourHtmlString);
anyElement.appendChild(fragment);

这将解决问题…

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'sanitize',
  pure: true
})
export class Sanitize {
  constructor(private domSanitizer: DomSanitizer) { }

  handleExternalScriptsInHtmlString(string) {
    let that = this;
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var results = [];
    for (var i = 0; i < scripts.length; i++) {
      var src = scripts[i].getAttribute('src');
      if (src.length && results.indexOf(src) === -1) {
        results.push(src);
        that.addScript(src);
      }
    }
    return results;
  }
  addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
  }

  transform(htmlContent: any) {
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent);
    this.handleExternalScriptsInHtmlString(htmlContent);
    return sanitizeHtmlContent;
  }
}

没有角度的方法…你需要这样做....

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
  name: 'sanitize',
  pure: true
})
export class Sanitize {
  constructor(private domSanitizer: DomSanitizer) { }

  handleExternalScriptsInHtmlString(string) {
    let that = this;
    var parser = new DOMParser();
    var scripts = parser.parseFromString(string, 'text/html').getElementsByTagName('script');
    var results = [];
    for (var i = 0; i < scripts.length; i++) {
      var src = scripts[i].getAttribute('src');
      if (src.length && results.indexOf(src) === -1) {
        results.push(src);
        that.addScript(src);
      }
    }
    return results;
  }
  addScript(src) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    document.body.appendChild(script);
  }

  transform(htmlContent: any) {
    let sanitizeHtmlContent = this.domSanitizer.bypassSecurityTrustHtml(htmlContent);
    this.handleExternalScriptsInHtmlString(htmlContent);
    return sanitizeHtmlContent;
  }
}
相关文章：