Question 322415 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript Open New Window with Tabs

I have a Javascript webpage that opens new windows just fine. But the customer brought to my attention that the new window ‘doesn’t look right‘ because is missing the tabs

enter image description here

They want it to look like this, which is ‘normal‘ behavior when you open a new window on a HTML page
enter image description here

I don’t see any options on the window.open method to force show the new window with tabs. I did notice that if i right click on the new window it gives me an option show the tabs and that changes the way the new window looks to the ‘normal‘ way.

enter image description here

Any ideas?

Here is my code

if (!isCtrlClick && !isShiftClick && !description) {
    this.$router.push({name:'ItemDetails', params: { sid: id, source: this.source }});
} else if (isShiftClick) {
    const itemDetailsData = this.$router.resolve({name:'ItemDetails', params: { sid: id, source: this.source }});
    window.open(itemDetailsData.href, "_blank","resizable=1");
} else if (isCtrlClick){
    const itemDetailsData = this.$router.resolve({name:'ItemDetails', params: { sid: id, source: this.source }});
    var keepFocus = window.open(itemDetailsData.href, "_blank");
    keepFocus.blur();
    window.focus();
    // context menu
} else if (description == 'newPage') {
    const itemDetailsData = this.$router.resolve({name:'ItemDetails', params: { sid: itemx.idN, source: this.source }});
    window.open(itemDetailsData.href, "_blank","resizable=1");
}
else {
    const itemDetailsData = this.$router.resolve({name:'ItemDetails', params: { sid: itemx.idN, source: this.source }});
    var keepFocus = window.open(itemDetailsData.href, "_blank");
    keepFocus.blur();
    window.focus();
}
Tags:

2

Answers


  1. 0

    I believe it is due to resizable=1

    see working snippet below

        <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="newWindow()">New window</button>
    <button onclick="newTab()">New Tab</button>
  </body>

  <script>
    function newWindow() {
      window.open('https://google.com', '_blank', 'resizable=1')
    }
    function newTab() {
      window.open('https://google.com', '_blank')
    }
  </script>
</html>
    Login or Signup to reply.
  2. 0

    As per docs here, you’re requesting to open a popup; that’s why you don’t get the "tab" behavior:

    Note: Specifying any features in the windowFeatures parameter, other than noopener or noreferrer, also has the effect of requesting a popup.

    I guess you should not use the resizeable option.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search