data attribute of object tag in html is not updating the new url

Question

Issue: I am trying to update the data attribute of object tag dynamically. The issue is the first time it loads perfectly, but thereafter it does not even though when i inspect the data attribute values are updated perfectly in html code using Angular. I believe it's not getting refreshed.

Html Code:

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

Angular Code:

  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 
  }

What i Tried: Hide/Show before updating the url, but does not work.

Please note i cannot use jQuery. Any help would be greatly appreciated.Thanks!

have you try with [attr.data]="newUrl"? – Ernesto Alfonso Jan 30 '21 at 10:43 — Ernesto Alfonso, Jan 30 '21 at 10:43

Sunil Singh · Answer 1 · 2018-10-13T15:52:14.210

1

You should avoid pure javascript code inside the angular otherwise angular will not be the aware of changes. Make the below changes -

html code

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

Angular Code

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

Demo

Woking copy is here https://stackblitz.com/edit/angular-object-url-pdf

edited Oct 13 '18 at 15:52

answered Oct 13 '18 at 15:29

Sunil Singh

11,001
2
27
48

Make sure the pdf url is from the secured protocol `https`. Demo link is here https://stackblitz.com/edit/angular-object-url-pdf – Sunil Singh Oct 13 '18 at 15:51
I am loading an external web page, currently it is not https. Also please note i cannot use iFrame. – Dev Oct 13 '18 at 15:53
@Dev, I don't think that will work. You might get a Mixed Content Error in that case since your website will load on HTTPS while your external webpage will load on http. – SiddAjmera Oct 13 '18 at 15:55
My website will not load on https, nor the iFrame links are https urls. Both are http. – Dev Oct 13 '18 at 16:02
Then it will work in your website however if you are testing this in any `https` site, it won't work. – Sunil Singh Oct 13 '18 at 16:06
Then it will work in your website however if you are testing this in any `https` site, it won't work. – Sunil Singh Oct 13 '18 at 16:06
Which environment or site you are checking in ? – Sunil Singh Oct 13 '18 at 16:21
local machine - stand alone application using angular – Dev Oct 13 '18 at 16:29
Can you try with this pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf – Sunil Singh Oct 13 '18 at 16:35
Tried, it does load for the first time correctly but when you update it dynamically from code it doesn't update to the new url, even though after inspecting the code the new url is set. It is not getting refreshed i believe. – Dev Oct 14 '18 at 07:46

score 0 · Answer 2 · answered Oct 13 '18 at 15:40

0

update data attribute like this instead of updating using Javascript.

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

answered Oct 13 '18 at 15:40

Piyush Jain

1,895
3
19
40

Tried the above, no change. – Dev Oct 13 '18 at 15:50
check this link. https://stackoverflow.com/questions/37927657/unsafe-value-used-in-a-resource-url-context-with-angular-2 – Piyush Jain Oct 13 '18 at 16:11

data attribute of object tag in html is not updating the new url

2 Answers2

html code

Angular Code

Demo