Abrir URL en la misma ventana y en la misma pestaña


361

Quiero abrir un enlace en la misma ventana y en la misma pestaña que contiene la página con el enlace.

Cuando trato de abrir un enlace usando window.open, se abre en una pestaña nueva, no en la misma pestaña en la misma ventana.

Respuestas:


600

Debe usar el atributo de nombre:

window.open("https://www.youraddress.com","_self")

Editar : Url debe anteponerse con protocolo. Sin él intenta abrir la URL relativa. Probado en Chrome 59, Firefox 54 e IE 11.


2
El segundo argumento es solo un nombre para la nueva ventana, como el atributo target=de etiqueta a. De hecho, puedes nombrar tu ventana como quieras. Todo lo que necesita es establecer un valor diferente, para que no se abra en la misma ventana o pestaña.
ijse

12
@ijse En realidad, hay algunos nombres especiales, uno de los cuales es '_self' que se refiere a la ganancia / pestaña en la que se ejecuta el código.;)
vdbuilder

55
'_self' no se especifica en los documentos MDN [ developer.mozilla.org/en-US/docs/Web/API/Window/open] en window.open (). Una solución más entre navegadores es usar location.replace ().
Bryan Rayner

1
El enlace MDN en el comentario anterior se vincula automáticamente a un 404. El enlace es developer.mozilla.org/en-US/docs/Web/API/Window/open
groovecoder

_selfse menciona en la sección 5.1.6 Nombres de contexto de navegación de la Recomendación HTML5 W3C del 28 de octubre de 2014 en: w3.org/TR/html/browsers.html#browsing-context-names (pero window.locationaún está más limpio).
Dem Pilafian



29

Puede hacer que vaya a la misma página sin especificar la URL:

window.open('?','_self');

Esa no es la misma página. Eliminará cualquier cadena de consulta de la URL existente.
Quentin

20

Si tiene sus páginas dentro de "marco", entonces "Window.open ('logout.aspx', '_ self')"

será redirigido dentro del mismo marco. Entonces usando

"Window.open('logout.aspx','_top')"

Podemos cargar la página como nueva solicitud.


11

Una de las características más destacadas de JavaScript es disparar controladores onclick sobre la marcha. Encontré el siguiente mecanismo más confiable que usar location.href=''o location.reload()o window.open:

// this function can fire onclick handler for any DOM-Element
function fireClickEvent(element) {
    var evt = new window.MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true
    });

    element.dispatchEvent(evt);
}

// this function will setup a virtual anchor element
// and fire click handler to open new URL in the same room
// it works better than location.href=something or location.reload()
function openNewURLInTheSameWindow(targetURL) {
    var a = document.createElement('a');
    a.href = targetURL;
    fireClickEvent(a);
}

¡El código anterior también es útil para abrir una nueva pestaña / ventana y evitar todos los bloqueadores de ventanas emergentes! P.ej

function openNewTabOrNewWindow(targetURL) {
    var a = document.createElement('a');
    a.href = targetURL;

    a.target = '_blank'; // now it will open new tab/window and bypass any popup blocker!

    fireClickEvent(a);
}

10

Abra otra url como un clic en el enlace

window.location.href = "http://example.com";

8

¿Tienes que usar window.open? ¿Qué hay de usar window.location="http://example.com"?


5

window.open(url, wndname, params), tiene tres argumentos. Si no desea que se abra en la misma ventana, simplemente configure un wndname diferente. como :

window.open(url1, "name1", params); // this open one window or tab
window.open(url1, "name2", params); // though url is same, but it'll open in another window(tab).

Aquí están los detalles window.open(), ¡puedes confiar en él!
https://developer.mozilla.org/en/DOM/window.open

pruébalo ~~


77
¡La pregunta es muy clara acerca de querer abrir en la misma ventana y la misma pestaña !
SNag

2

Con html 5 puede usar la API de historial .

history.pushState({
  prevUrl: window.location.href

}, 'Next page', 'http://localhost/x/next_page');
history.go();

Luego, en la página siguiente, puede acceder al objeto de estado así

let url = history.state.prevUrl;
if (url) {
  console.log('user come from: '+ url)
}

1

Eso es bastante fácil. Abrir primera ventana comowindow.open(url, <tabNmae>)

Ejemplo: window.open("abc.com",'myTab')

y para el siguiente todo window.open, use el mismo nombre de pestaña en lugar de _self, _parentetc.


1

Exactamente así window.open("www.youraddress.com","_self")


1
   Just Try in button.

   <button onclick="location.reload();location.href='url_name'" 
   id="myButton" class="btn request-callback" >Explore More</button>

   Using href 

  <a href="#" class="know_how" onclick="location.reload();location.href='url_name'">Know More</a> 

No tiene ningún sentido activar una recarga de la página actual y luego cancelarla en la siguiente declaración al cargar una nueva página.
Quentin

-3

Como dicen los árbitros de MDN, solo necesito dar un nombre al nuevo window/ tab.

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Syntax

abrir en la pestaña actual usando _self

<a
 href="url"
 target="_self">
   open
</a>
const autoOpenAlink = (url = ``) => {
  window.open(url, "open testing page in the same tab page");
}

abrir en una nueva pestaña usando _blank

vue demo

    <div style="margin: 5px;">
        <a
            :href="url"
            @click="autoOpenAlink"
            target="_blank"
            >
            {{url}}
        </a>
    </div>

vue

    autoOpenAlink(e) {
        e.preventDefault();
        let url = this.url;
        window.open(url, "iframe testing page");
    },

No puede saber de manera confiable el nombre de la ventana actual. Es mejor seguir los consejos de esta respuesta de 2011 y usar el nombre especial _self.
Quentin

Tu primer ejemplo es simplemente incorrecto. _blank es, explícitamente, una nueva ventana o pestaña sin nombre .
Quentin

¡De ningún modo! si configuro _self, se abrirá en la página actual, lo cual es malo para mí, solo necesito una nueva página.
xgqfrms

¡La pregunta no es sobre lo que necesitas! Si desea responder una pregunta sobre lo que necesita, busque una pregunta para eso.
Quentin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.