Login/Register
how to show window title using window.open()?
Asked Answered
javascripttitlewindow.open
N

13

38

I want to open a new window using:

window.open('<myfile>.pdf','my window','resizable,scrollbars');

The new window opens, but I do not get the title of the window as 'my window'. What could be going wrong?

Nonsectarian answered 8/11, 2011 at 14:19 Comment(4)
The second argument to window.open() is the new window's name, not its title. The actual title comes from the <title> element of the HTML document loaded into that window. Since you're loading a PDF file, it will be left to the discretion of your browser. – Noyes
Is there no workaround for this? I really need to get the title for the new window that is opening the pdf. – Nonsectarian
I don't know of any workaround, short of writing an add-on for every browser you want to support. – Noyes
And the window name can not have spaces or IE will not open up the pop up. :) – Almsman
W
46

If domain is same then you can change the title of new window

 <script type="text/javascript">
    var w = window.open('http://localhost:4885/UMS2/Default.aspx');
    w.document.title = 'testing';
 </script>
Westwardly answered 8/11, 2011 at 16:2 Comment(2)
Try adding a setTimeout like this: setTimeout(() => w.document.title = 'This is a test',0); – Vaal
setTimeout() helps, just add 50ms instead of 0ms. – Fateful
P
19

Here is my solution, please check this out:

var myWindow = window.open('<myfile>.pdf','my window','resizable,scrollbars');
myWindow.document.write('<title>My PDF File Title</title>');

Hope I could help.

Paratrooper answered 27/5, 2013 at 11:16 Comment(0)
H
7

This is what I did:

    <script type="text/javascript">
    function OpenWindow() {
            var pdf = '<%= "PDFs/13.7/" + ddlLinkValidation.SelectedValue.ToString() + ".pdf" %>';
            var win = window.open('','UATRpt', 'menubar=0,location=0,toolbar=0,resizable=1,status=1,scrollbars=1');

            if(win.document) { 
                win.document.write('<html><head><title>Your Report Title</title></head><body height="100%" width="100%"><iframe src="' + pdf + '" height="100%" width="100%"></iframe></body></html>');
            } 
            return true;
    } 
    </script>

in HTML body
<U><A style="cursor: pointer;" onclick="OpenWindow()">Open in New Window</a></U>

Hargrave answered 24/10, 2013 at 13:23 Comment(1)
its working for setting title of page but it also set blank url of page so download link not working. any suggestion for it ? – Craquelure
F
5

The JavaScript "title" argument is a variable to be used inside of JavaScript. The actual title written in the top of the window normally comes from the HTML <title> tag, but you don't have that since you're showing a PDF.

Futures answered 8/11, 2011 at 14:25 Comment(1)
Is there no way in which I can get the title for the new window? – Nonsectarian
C
5

If the new window has a file (PDF for example) as an url, it’s possible that the page has no "head" tag.

You have to add one before to modify / add the title.

jQuery :

var w = window.open('/path/to/your/file.pdf');// or any url
$(w.document).find('html').append('<head><title>your title</title></head>');

Native js :

var w = window.open('/path/to/your/file.pdf');// or any url
w.document.getElementsByTagName('html')[0]
   .appendChild(document.createElement('head'))
   .appendChild(document.createElement('title'))
   .appendChild(document.createTextNode('your title'));

Now if the page is long to load, you may add a onload watch, then also a timeout. In my case, I had to code like that :

var w = window.open('/path/to/your/file.pdf');// or any url
w.onload = function(){
    setTimeout(function(){
       $(w.document).find('html').append('<head><title>your title</title></head>');
    }, 500);
} // quite ugly hu !? but it works for me.
Cotton answered 18/5, 2016 at 12:36 Comment(1)
As to jQuery, while preserving the $(…) object, instead of specifying the .find method, I should rather go for $(w.document.lastChild) —it must be faster. – Laceration
M
4

To change title of pdf in newly opened window

    function titlepath(path,name){

        //In this path defined as your pdf url and name (your pdf name)

            var prntWin = window.open();
            prntWin.document.write("<html><head><title>"+name+"</title></head><body>"
                + '<embed width="100%" height="100%" name="plugin" src="'+ path+ '" '
                + 'type="application/pdf" internalinstanceid="21"></body></html>');
            prntWin.document.close();
        }

Onclick

<a onclick="titlepath('your url','what title you want')">pdf</a>
Melba answered 8/6, 2018 at 12:48 Comment(0)
W
2

Below code works to me on Mozilla Firefox, IE 11 and Google Chrome. 

var winUrl = 'target URL that needs to open in new window';     

var _newWindow = window.open(winUrl, "_newWindow");

_newWindow.document.title = "My New Title";
Went answered 25/4, 2017 at 10:3 Comment(1)
This seems to be the easiest way to accomplish the task. Sometimes obvious is obvious and complicated is a major waste of time. – Truong
C
2
const wnd = window.open(url, '_blank');

wnd.onload = function() {
   wnd.document.title = 'YOUR TITLE';
}
Cauca answered 20/4, 2021 at 4:57 Comment(1)
I love this listenable way – Gyroplane
A
1

The only way it worked in my case was using setTimeout like this:

var mapWin = window.open('', '_blank', ''); // Opens a popup   

setWindowTitle(mapWin) // Starts checking

function setWindowTitle(mapWin)
{
    if(mapWin.document) // If loaded
    {
        mapWin.document.title = "Oil Field Map";
    }
    else // If not loaded yet
    {
        setTimeout(setWindowTitle, 10); // Recheck again every 10 ms
    }
}
Ascription answered 14/3, 2014 at 22:35 Comment(0)
T
0
    var myWindow = window.open('', '', 'width=600,height=400');
    setTimeout(function(){ myWindow.document.title = 'my new title'; }, 1000);

works chrome 2018

Tonie answered 3/1, 2018 at 23:15 Comment(0)
M
0

You can try writing the html doc: setting the pdf url to an iframe and letting the title tag define the page title.

var w = window.open();
w.document.write(`<html>
  <head>
    <title>${title}</title>
  </head>
  <body style="margin: 0; padding: 0">
    <iframe src="${pdfInlineUrl}" style="width: 100%; height: 100%; margin: 0; padding: 0; border: none;"></iframe>
  </body>
</html>`);
Magna answered 17/2, 2021 at 1:18 Comment(0)
C
0
const myWindow = window.open('<myfile>.pdf', 'my-window');
if (myWindow ) {
    const title = myWindow.document.createElement('title');
    title.innerText = 'my window title';
    myWindow.document.head.append(title);
}
Cristinacristine answered 5/5, 2023 at 8:18 Comment(1)
Answer needs supporting information Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Muraida
S
0

You can do it by this

 function printData(id) {
            console.log(id); //belongs to Div ID
            var divToPrint = document.getElementById(id);
            var newWin = window.open('');
            newWin.document.write('<title>Invoice</title>');
            newWin.document.title = id;
            newWin.document.write(divToPrint.outerHTML );
            
            newWin.print();
            newWin.close();
        }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<button onclick="printData('question-header')" class="btn btn-light text-capitalize border-0" data-mdb-ripple-color="dark"><i class="fas fa-print text-primary"></i> Print</button>
Slideaction answered 24/1 at 6:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.