Today, I encountered a need in a company background project to click a button, send a request, and then open a new window (jump to another background) with the URL in the data to which the request was sent. It doesn’t seem to be a problem, and soon the code will be written (vUE project) :

clickHandle() {
  api.get('xxx', params).then(response= > {
    let data = response.data;
    if(data.code === 0 ) {
      let url = data.data.url || ' ';
      if (url) {
        window.open(url); }}}); }Copy the code

After a brief flurry, it turns out that the browser is blocking the opening of the new window…

The search engine told me that opening a new window due to a non-user action might be partially blocked by browsers (in Google Chrome, this is represented by a notification icon at the end of the address bar that lets you click on the notification to allow or continue blocking). Search engines also say they can simulate user behavior by manually triggering DOM events to avoid browser interception.

With that in mind, I modified the pseudocode as follows:

clickHandle() {
  api.get('xxx', params).then(response= > {
    let data = response.data;
    if(data.code === 0 ) {
      let url = data.data.url || ' ';
      if (url) {
        // window.open(url);
        // Add a tag to the DOM - Register click event to open a new window - trigger click event - Remove a tag from the DOM
        let a = document.createElement('a');
        a.id = 'temp';
        document.body.appendChild(a);
        a.addEventListener('click'.function(){
          window.open(url);
        });
        a.click();
        document.body.removeChild(a); }}}); }Copy the code

Good, happy to test again, however, the browser still blocked…

The smile became slutty. The smile solidified. It broke.

Again, the search engine tells me that any window.open() execution in an asynchronous callback will be intercepted.

Ok, let’s get this straight: we’re not doing window.open() in the asynchronous callback this time. Click the button to open the new window and save the reference to the new window in data. After the request gets the URL, save the URL in the data as well. Then we watch the URL, and when the URL has a value, we redirect the reference to the new window. Let’s hope there’s no drama this time. The code is modified as follows:

export default {
  data() {
    return {
      url: ' '.newWin: null  // Reference to the new window}},watch: {
    url(newVal, oldVal) {
      if(newVal && this.newWin) {
        this.newWin.location.href = newVal;
        // Reset the URL and newWin after the redirect
        this.url = ' ';
        this.newWin = null; }}},methods: {
    clickHandle() {
      let _this = this;
      // Open an empty new window and then request
      this.newWin = window.open();
      api.get('xxx', params).then(response= > {
        let data = response.data;
        if(data.code === 0 ) {
          _this.url = data.data.url || ' '; }}); }}}Copy the code

Carefully tested, this time it turned on, it really turned on. I can’t say I’m happy. I’m just happy.

The next moment, HOWEVER, I realized THAT I was happy earlier: the window was open, but the page in the new window was still loading the animation state. I used to think this loading animation was pretty good, it was just a big circle with a missing fan eating small circles in a line, but now I think it’s eating a little too much.

The smile grew sickly. Come on, don’t laugh.

Instead of using a search engine this time, I found the above problem because the opening of the new window left the old window’s sessionStorage(why sessionStorage prevents my new page from loading is beyond the scope of this article). Once the reason is known, the solution is simply to empty the sessionStorage in the new window before redirecting. Is this. This line of code in the above code newWin. Location. The href = newVal; Add a line before this. NewWin. SessionStorage. The clear (). I won’t put the code in there.

Nothing went wrong this time.

conclusion

Browsers also block new Windows from opening to protect the user experience and can block some ads. Note that the reference to the new window, newWin, is actually a new window object, which naturally uses the above method to clear sessionStorage. More information about the Window object, such as the communication between a new window and the window that opened it, can be found in Advanced Programming in Javascript, Chapter 8, Section 1.