Is there a way to open a link in a new window without using the _blank attribute?

Question

Is there a way to open a link in a new window without using the _blank attribute?

I am facing an issue where I have a webpage with a URL linking to a PHP file that displays an image, and I want to open this picture in a new window without the blank page showing up.

Currently, when I click on the URL using the code below, a new window opens along with a blank page, which is not desired as I have to close it every time. I only want the window to display the picture.

window.open('image.PNG', 'image', 'toolbar,menubar,scrollbars,resizable,height=800,width=400,left=600,top=400');

Any suggestions on how to achieve this?

//edit Using prevent default does not seem to work when I have

<a href="file.php">Link</a> //URL to PHP with script above

javascript jquery html css

Answer 1

Answer №1

Copy and paste the following code snippet into your browser's console:

open('image.png');

If a new tab opens displaying the desired image, try the next set of instructions:

<a href = 'image.png' id = 'image'>

and

document.getElementById('image').onclick = funciton(e){
    e.preventDefault();
    open('image.PNG', 'image', 'toolbar,menubar,scrollbars,resizable,height=800,width=400,left=600,top=400');
};

If this method does not work as expected, try the alternative option by executing the code below in your console:

open('file.php');

A new tab should open with the desired image. Proceed to try the following:

<a href = 'file.php' id = 'file'>

and

document.getElementById('file').onclick = funciton(e){
    e.preventDefault();
    open('file.php', 'image', 'toolbar,menubar,scrollbars,resizable,height=800,width=400,left=600,top=400');
};

If all else fails, please leave a comment below for further assistance.

Answer 2

Copy and paste the following code snippet into your browser's console:

open('image.png');

If a new tab opens displaying the desired image, try the next set of instructions:

<a href = 'image.png' id = 'image'>

and

document.getElementById('image').onclick = funciton(e){
    e.preventDefault();
    open('image.PNG', 'image', 'toolbar,menubar,scrollbars,resizable,height=800,width=400,left=600,top=400');
};

If this method does not work as expected, try the alternative option by executing the code below in your console:

open('file.php');

A new tab should open with the desired image. Proceed to try the following:

<a href = 'file.php' id = 'file'>

and

document.getElementById('file').onclick = funciton(e){
    e.preventDefault();
    open('file.php', 'image', 'toolbar,menubar,scrollbars,resizable,height=800,width=400,left=600,top=400');
};

If all else fails, please leave a comment below for further assistance.

Is there a way to open a link in a new window without using the _blank attribute?

Answer №1

Similar questions

Determining the largest range possible in a sorted array of integers

Ways to execute a script from termly on NextJS using JSX

Learn how to launch a new webpage using jQuery Colorbox plugin

Capable of displaying array in console, however unable to iterate through its elements

Using Jquery to retrieve data from PHP for validation in a datepicker widget

Import failures in Three.js could be attributed to potential issues with Webpack

changing the action URL of a jQuery form dynamically upon submission

Is there a permanent solution to fixing the error code -4094 that is repeatedly occurring during React Native startup?

Leveraging Javascript within MVC3, either on a master page or child page

choose a value from a dropdown menu to reset other dropdowns to their default values

Fetching an image from Firebase Storage for integration into a Vue application

Utilize Vue to localize the click events of buttons on the webpage

Update the browser URL dynamically without redirecting the page, by utilizing JavaScript after an AJAX call receives a

How to search for a value in Firebase database and save it to an HTML table?

The Process of Developing Applications

Dynamically include a new prop to the final element within an array of React components

What is the method for replacing "left" with the label of an element?

Contrast 2 GET objects retrieved from separate controllers

Verify whether a variable is empty or not, within the sequence flows in Camunda Modeler

Ensure that the CSS element pseudo-class does not override the styling of its child