✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Open New Tab With Content

Last Updated : Mar 11, 2024

IN - JavaScript | Written & Updated By - Dikshita

JavaScript Open New Tab With Content

In this tutorial we will show you the solution of JavaScript open new tab with content, here we needs to use window, document objects with open(), write() methods for open new window.

The window.open() method opens a new browser window or a new tab depending on our browser setting and the parameter values.

The document.write() method writes a string of text to a document stream opened by document.open().

Step By Step Guide On JavaScript Open New Tab With Content :-

Here in script we defined variable ‘win’ for refer window object. Using variable ‘win’ we defining new tab size of ‘width to 800, height to 600’ and toolbar settings to ‘0’.

So when user loads this file on browser new tab will open as per we given size and specifications then we are writing some content on that tab so we defined document.write() with ‘win’.

Within that we setting tab title and contents for tab. 

<!DOCTYPE html>
<html>
    <head>
        <title>New Tab With Content</title>
    </head>
    <body>
        <script>
            var win=window.open('','',width=800,height=600,toolbar=0);
            win.document.write('<title>Print Report</title>Hello Everyone Welcome to New Window');
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In <script> we defined window.open() method with window size specifications as ‘width and height to 800,600’ then we setting toolbar to none and those referred by variable ‘win’.
  7. Using document.write() method we sets tab title as ‘Print Report’ and inserted content ‘Hello Everyone Welcome to New Window’ on tab by adding this with object ‘win’.
  8. So when user loads this file new window tab will opened with defined size and specifications with contents.
  9. We can also modify contents or title, size anything with your own wish those are not mandatory specifications.
  10. Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to open new tab with content using javascript.

When we executing this program on browser we can see new window tab will open with respect to defined window size and inserted contents.

We can also open new tab with blank space and we can create with customized specifications later we will see about that in future.

I hope this tutorial on JavaScript open new tab with content helps you and the steps and method mentioned above are easy to follow and implement.