window.onload not working in angular 4

Question

I want to open a new window popup and as soon as the URL got load in the new popup window I want to close it.

This my component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';

  ngOnInit():void{
    var popup=window.open('https://www.w3schools.com','newwindow','width=300,height=200');
    popup.onload=function(){
      alert("Hello");
      window.close();
    }
  }
}

In above code

popup.onload=function(){
   alert("Hello");
   window.close();
 }

is not working, there is no alert and also window didn't got close. but if I just do

popup.alert("Hello");
popup.close();

It work's. But I want to close the window when the whole URL got load i.e on onload() function.

Please provide some pointer regarding this issue.

Thanks in advance!

If you've been "learning" from https://www.w3schools.com, stop now before it is too late. — Aluan Haddad, Apr 05 '18 at 06:18
I am not learing from w3schools.com, I was just using that URL to open new window. — Girish Ingle, Apr 05 '18 at 06:22
OK good but pick another URL. You never know when you might have a moment of weakness, none of us do :D — Aluan Haddad, Apr 05 '18 at 06:22
Possible duplicate of [how to write Onload function using angular 4?](https://stackoverflow.com/questions/48049146/how-to-write-onload-function-using-angular-4) — Harry B, Apr 05 '18 at 06:46
No. The question which you are referring is for how to write onload function for angular i.e ngOnInit(). But I am already using ngOnInit and my question is regarding window.onload() — Girish Ingle, Apr 05 '18 at 06:52

score 1 · Answer 1 · answered Apr 05 '18 at 06:57

1

Why you are using onLoad if you can You use ngAfterViewInit(). "Respond after Angular initializes the component's views and child views / the view that a directive is in."

popup: any;
ngOnInit():void{
this.popup=window.open('https://www.w3schools.com','newwindow','width=300,height=200');
}
ngAfterViewInit() {
this.popup.close();
}

import ngAfterViewInit and try if this works for you.

answered Apr 05 '18 at 06:57

Lokesh Kumar Meena

455
2
11

1

It will not work because the pop page is from a different domain and different page and ngAfterViewInit works only for a current component page – Parth Savadiya Apr 05 '18 at 07:01
@pArthsavadiya then how popup.alert() and popup.close() is working? I think just popup.onload() in not working – Girish Ingle Apr 05 '18 at 08:36
@pArthsavadiya yes – Girish Ingle Apr 05 '18 at 08:58
What about creating a different component for new window and use routes to set the url , there in OnInit Provide the url to redirect and try onload ??? – Lokesh Kumar Meena Apr 05 '18 at 10:09
@LokeshKumarMeena If we create the component and use redirect in onNgInit() eg: window.location.href = 'https://www.w3schools.com'; the whole page will redirect to w3school – Girish Ingle Apr 05 '18 at 11:53
@pArthsavadiya I guess when new window opens and get's loaded angular lost its reference with the newly created window – Girish Ingle Apr 06 '18 at 06:26

score 0 · Answer 2 · answered Apr 05 '18 at 07:02

angular 2 app run on the different environment like web, mobile, server-side rendering so windows object may or may not be available there. so it's not the best approach to use windows object directly instead make service which returns windows object and simply substitute the service implementation according to the environment

@Injectable()
export class WindowRef {
    constructor() {}

    getNativeWindow() {
        return window;
    }
}

score 0 · Answer 3 · answered Oct 31 '18 at 18:55

0

The problem is you used "alert("Hello"); " and did not reference the popup. It should be

popup.onload=function(){
  alert("Hello");
  window.close();
}

answered Oct 31 '18 at 18:55

JAC

297
2
8

window.onload not working in angular 4

3 Answers3