readystatechange - on ready state change javascript
Evento cuando cambia window.location.href (6)
Estoy escribiendo un script de Greasemonkey para un sitio que en algún momento modifica location.href .
¿Cómo puedo obtener un evento (a través de window.addEventListener o algo similar) cuando window.location.href cambia en una página? También necesito acceder al DOM del documento que apunta a la url nueva / modificada.
He visto otras soluciones que implican tiempos de espera y encuestas, pero me gustaría evitar eso si es posible.
¿Has probado antes de descargar? Este evento se dispara inmediatamente antes de que la página responda a una solicitud de navegación, y esto debería incluir la modificación de la href.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="TextPad 4.6">
<META NAME="Author" CONTENT="?">
<META NAME="Keywords" CONTENT="?">
<META NAME="Description" CONTENT="?">
</HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).unload(
function(event) {
alert("navigating");
}
);
$("#theButton").click(
function(event){
alert("Starting navigation");
window.location.href = "http://www.bbc.co.uk";
}
);
});
</script>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
<button id="theButton">Click to navigate</button>
<a href="http://www.google.co.uk"> Google</a>
</BODY>
</HTML>
Sin embargo, tenga en cuenta que su evento se activará siempre que navegue fuera de la página, ya sea por el guión o por alguien que haga clic en un enlace. Su verdadero desafío es detectar las diferentes razones del lanzamiento del evento. (Si esto es importante para tu lógica)
A través de Jquery , solo inténtalo
$(window).on(''beforeunload'', function () {
//your code goes here on location change
});
Al usar javascript :
window.addEventListener("beforeunload", function (event) {
//your code goes here on location change
});
Consulte el documento: https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload
Hay un evento onhashchange predeterminado que puede usar.
Y se puede usar así:
function locationHashChanged( e ) {
console.log( location.hash );
console.log( e.oldURL, e.newURL );
if ( location.hash === "#pageX" ) {
pageX();
}
}
window.onhashchange = locationHashChanged;
Si el navegador no admite oldURL y newURL , puede vincularlo así:
//let this snippet run before your hashChange event binding code
if( !window.HashChangeEvent )( function() {
let lastURL = document.URL;
window.addEventListener( "hashchange", function( event ) {
Object.defineProperty( event, "oldURL", { enumerable: true, configurable: true, value: lastURL } );
Object.defineProperty( event, "newURL", { enumerable: true, configurable: true, value: document.URL } );
lastURL = document.URL;
} );
} () );
No puede evitar las encuestas, no hay ningún evento para el cambio de href.
El uso de intervalos es bastante ligero de todos modos si no te excedes. Controlar el href cada 50 ms aproximadamente no tendrá ningún efecto significativo en el rendimiento si le preocupa eso.
Uso este script en mi extensión "Grab Any Media" y funciono bien ( como en el caso de Youtube )
var oldHref = document.location.href;
window.onload = function() {
var
bodyList = document.querySelector("body")
,observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (oldHref != document.location.href) {
oldHref = document.location.href;
/* Changed ! your code here */
}
});
});
var config = {
childList: true,
subtree: true
};
observer.observe(bodyList, config);
};
El evento popstate se activa cuando cambia la entrada del historial activo. [...] El evento popstate solo se desencadena al realizar una acción del navegador, como hacer clic en el botón Atrás (o invocar history.back () en JavaScript)
Por lo tanto, escuchar el evento popstate y enviar un evento de estado popstate cuando use history.pushState() debería ser suficiente para tomar medidas en href change:
window.addEventListener(''popstate'', listener);
const pushUrl = (href) => {
history.pushState({}, '''', href);
window.dispatchEvent(new Event(''popstate''));
};