对Table或TR元素使用innerHTML时报“未知运行时错误”解决方案。

有时候对table使用innerHTML时报“未知运行时错误”。

先上代码片段。

 

 

 

如果使用document.getElementById("tbl").innerHTML = "<tr><td></td><td></td><td></td></tr>"; 时,在IE下有时候会报“未知运行时错误”,上次遇到了感觉很怪异,非ie下没问题。

 

原因: TR、Table对象的包容性比较低,对innerHTML使用会报错。

 

解决:尽量使用span或者div当容器,再在span或div中使用innerHTML。

在Angular中,使用innerHTML指令时,确实会自动移除style属性,这是因为Angular认为这样可以避免可能的XSS攻击。如果你需要在Angular中使用innerHTML指令并保留style属性,可以使用以下两种方法中的任何一种: 1. 使用DomSanitizer 可以使用Angular提供的DomSanitizer服务来手动信任HTML字符串。首先,在组件的构造函数中注入DomSanitizer服务,然后在template中使用管道来信任HTML字符串,例如: ``` import { Component } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', template: ` <div [innerHTML]="trustedHtml"></div> ` }) export class AppComponent { trustedHtml: any; constructor(private sanitizer: DomSanitizer) { const html = '<div style="color: red;">Hello, World!</div>'; this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(html); } } ``` 在这个例子中,我们首先注入了DomSanitizer服务,然后在构造函数中使用该服务的bypassSecurityTrustHtml方法来信任HTML字符串。最后,在template中使用innerHTML指令和trustedHtml变量来渲染HTML。 2. 使用HostBinding 可以使用@HostBinding装饰器来绑定元素innerHTML属性,并在组件中手动设置该属性,例如: ``` import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'app-root', template: ` <div [innerHTML]="html"></div> ` }) export class AppComponent { @HostBinding('innerHTML') html: any; constructor() { const html = '<div style="color: red;">Hello, World!</div>'; this.html = html; } } ``` 在这个例子中,我们使用@HostBinding装饰器来绑定元素innerHTML属性,并在构造函数中手动设置该属性。这样,Angular就不会自动移除style属性了。 需要注意的是,使用innerHTML指令时需要非常谨慎,因为它可能会导致XSS攻击。因此,除非你确实需要使用innerHTML指令,否则最好避免使用它。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值