44

Code is as following:

    <p class="downloadBoks" onclick="location.href='Prosjektplan.pdf'">Prosjektbeskrivelse</p>

Works fine like this, but it opens the file in the same window. I want to apply the target="_blank". But after some googleing I still can't figure it out.

2
  • 7
    target="_blank" is for <a> tags not <p>
    – Ricky Stam
    Commented Oct 25, 2013 at 11:35
  • The location.href= was just the thing i was looking for Commented Nov 14, 2020 at 20:25

6 Answers 6

66

Instead use window.open():

The syntax is:

window.open(strUrl, strWindowName[, strWindowFeatures]);

Your code should have:

window.open('Prosjektplan.pdf');

Your code should be:

<p class="downloadBoks"
   onclick="window.open('Prosjektplan.pdf')">Prosjektbeskrivelse</p>
7
  • Not entirely true. The target attrib is no longer deprecated. Ref: dev.w3.org/html5/markup/a.html; and a is any day preferable over using a p to link to a resource using javascript.
    – Abhitalks
    Commented Oct 25, 2013 at 11:41
  • 2
    Oh yeah... The target attribute on the a element was deprecated in a previous version of HTML, but is no longer deprecated, as it useful in Web applications, particularly in combination with the iframe element. Commented Oct 25, 2013 at 11:42
  • Doesn't work on mobile, and gets blocked. This is much worse than leaving the target blank to work as usual and listening for the event.
    – doublejosh
    Commented Oct 21, 2021 at 22:10
  • do not forget to add return=false in order to stay in the same URL in the main window (event prevent default) => onclick="window.open('Prosjektplan.pdf');return false;"
    – eosphere
    Commented Jan 30, 2022 at 16:34
  • @eosphere Nopes! Not in case of <p>. What's the default event on paragraph that you're trying to prevent? 😅 Commented Jan 30, 2022 at 16:45
44
onclick="window.open('your_html', '_blank')"
1
  • 2
    '_blank' is useless in that context
    – eosphere
    Commented Jan 30, 2022 at 16:36
8

Just use window.open():

window.open('Prosjektplan.pdf')

Anyway, what guys are saying on comments is true. You better use <a target="_blank"> instead of click events.

0
5

you can use

        <p><a href="/link/to/url" target="_blank"><button id="btn_id">Present Name </button></a></p>
1
  • Yes. This is the genius answer.
    – doublejosh
    Commented Oct 21, 2021 at 23:01
0

The window.open method is prone to cause popup blockers to complain

A better approach is:

Put a form in the webpage with an id

<form action="theUrlToGoTo" method="post" target="yourTarget" id="yourFormName"> </form>

Then use:

function openYourRequiredPage() {
var theForm = document.getElementById("yourFormName");
theForm.submit();

}

and

onclick="Javascript: openYourRequiredPage()"

You can use

method="post"

or

method="get"

As you wish

2
  • 1
    This does not work either. It gets detected as a popup and blocked in all major browsers
    – baoutch
    Commented Jan 28, 2020 at 14:19
  • Make sure that the tab to open is https
    – Phil Allen
    Commented Jan 30, 2020 at 1:59
0

All these solutions don't work properly to fix the issue you have to put your string in a variable and wrap it all up in an iframe like this:

   const newWindow = window.open();
  newWindow.document.write(`
    <html>
      <body style="margin: 0; overflow: hidden;">
        <iframe
          src="${pdfUrl}"
          title="PDF Viewer"
          style="width: 100%; height: 100vh; border: none;"
        ></iframe>
      </body>
    </html>
  `);
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.