angular - iFrame validation http get SRC -
as have read before, cannot validate if iframe loaded, not loaded or still loading in chrome using onerror or onload functions, decided test url provided src iframe using simple http get.
i start loading iframe specific url, , check url @ same time using http get. if http returns 200 ok, means iframe loaded correctly hide error message (this.iframestatus = false;). if http returns error, should change iframe url , show error message (this.iframestatus = true;).
component
export class statuscomponent implements oninit { public iframeurl: any; public iframe: any; public iframestatus: boolean = false; public counter: number = 0; public errormessage: any; //assign url iframe in constructor constructor(private _sanitizer: domsanitizer, public _element: elementref, private _verificationservice: verificationservice) { this.iframeurl = this._sanitizer.bypasssecuritytrustresourceurl(constant.url); settimeout(() => { this.iframestatusverification(); }, 3000); } //verify if iframe correctly loaded ngafterviewinit() { this.iframe = this._element.nativeelement.queryselector('.iframe'); } iframestatusverification() { this._verificationservice.getappstatus().subscribe( data => { console.log('success', data); this.iframestatus = false; this.iframeurl = this._sanitizer.bypasssecuritytrustresourceurl(constant.url); }, error => { error => this.errormessage = <any>error console.log('error', error); console.log('error status', error.status); console.log('error ok', error.ok); this.iframestatus = true; //this.iframe.src = constant.emptyiframe; this.iframeurl = this._sanitizer.bypasssecuritytrustresourceurl(constant.emptyiframe); } ); } ngoninit() { } } service
@injectable() export class verificationservice { //external app iframe verification getappstatus(): observable<string[]> { let url = constant.localserver + constant.url; console.log(url); return this.http.get(url, this._requestoptions) .timeout(5000) .map(res => { let body = res.json(); return body; }) .catch((err: any): => { this.handleerror(err, 'error app not found '); //return observable.of(err); }); } handleerror(err: any, message: string) { let errmsg = (err.message) ? err.message : err.status ? `${err.status} - ${err.statustext}` : 'server error'; console.error(errmsg); // log console instead return observable.of(err); } } this._requestoptionsare injected service header options cross origin properties.
the iframe loaded, receive 200 ok url error message shown , src changed.
i try print error status or message in component (console.log('error status', error.status);) undefined. idea why ?
you should use httperrorresponse check possible failures external api.
how use it?
import { httperrorresponse } '@angular/common/http'; http .get<itemsresponse>('api url') .subscribe( data => {...}, (err: httperrorresponse) => { if (err.error instanceof error) { // client-side or network error occurred. handle accordingly. console.log('an error occurred:', err.error.message); } else { // backend returned unsuccessful response code. // response body may contain clues went wrong, console.log(`backend returned code ${err.status}, body was: ${err.error}`); } } });
Comments
Post a Comment