Angular2动态插入脚本标签
Angular2 dynamically insert script tag
我正在从服务器内容进入 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);
}
}
我知道 DomSanitizationService 中有 bypassSecurityTrustScript 功能,但我该如何使用它?
这不是 angular 2 的问题,script
通过 innerHTML 插入的标签没有被执行。
如果您有包含 script
标签的 html 字符串,请按以下方式插入:
const fragment = document.createRange().createContextualFragment(yourHtmlString);
anyElement.appendChild(fragment);
没有angular方法...你需要这样做....
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;
}
}
我正在从服务器内容进入 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);
}
}
我知道 DomSanitizationService 中有 bypassSecurityTrustScript 功能,但我该如何使用它?
这不是 angular 2 的问题,script
通过 innerHTML 插入的标签没有被执行。
如果您有包含 script
标签的 html 字符串,请按以下方式插入:
const fragment = document.createRange().createContextualFragment(yourHtmlString);
anyElement.appendChild(fragment);
没有angular方法...你需要这样做....
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;
}
}