Javascript html中对象标记的数据属性未更新新url

问题： 我正在尝试动态更新对象标记的数据属性。 这个问题是它第一次完全加载，但之后就没有了，即使在我检查数据时，属性值在html代码中使用Angular进行了完全更新。我相信它没有恢复活力

Html代码：

<object id="content" *ngIf="download" [data]="newUrl" width="70%" height="300px"></object>

  updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide

    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    document.getElementById("content").setAttribute('data', url);    
    this.download = true; // show 
  }

我的尝试： 在更新url之前隐藏/显示，但不起作用

---

请注意，我不能使用jQuery。任何帮助都将不胜感激。谢谢

您应该避免angular中的纯javascript代码，否则angular将不会意识到更改。作出以下更改—

html代码 演示

---

Woking copy在这里

像这样更新数据属性，而不是使用Javascript更新

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>

尝试了上述操作，没有更改。请检查此链接。确保pdf url来自安全协议

https

。演示链接在这里，我正在加载一个外部网页，目前它不是https。另外请注意，我不能使用iFrame。@Dev，我认为这不起作用。在这种情况下，您可能会遇到混合内容错误，因为您的网站将加载HTTPS，而您的外部网页将加载http。我的网站不会加载HTTPS，iFrame链接也不是HTTPS URL。两者都是http。然后它将在您的网站上工作，但是如果您在任何

https

网站上测试它，它将不会工作。您尝试过[attr.data]=“newUrl”吗？

 updateUrl(url: string) {
    console.log('Parent Component updateUrl: ' + url);
    this.download = false; // hide
    this.newUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    this.download = true; // show 
  }

<object id="content" *ngIf="download" [attr.data]="newUrl" width="70%" height="300px"></object>