Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Tonics en 1 Julio 2020, 12:50



Título: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: Tonics en 1 Julio 2020, 12:50
Buenas a todos.

Estoy intentando automatizar una pagina con greasemonkey, en la cual tengo que hacer un click.

Intendo obtener el div con getelementbyid() pero no lo encuentra y al mirar el inspector de codigo de firefox si esta el id.

Este es el codigo de la pagina que aparece en el inspector de codigo:


Código:
<div id="interContainer" style="left: 0px; top: 174px; visibility: visible;">

<div class="headerbar">

<a href="#" onclick="javascript:interstitialBox.closeit(); return false">

<img src="/pop/closeit.gif" style="border: 0" title="Close Box"></a>

</div>

</div>

Cualquier ayuda vendra bien


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: #!drvy en 1 Julio 2020, 13:10
¿Cuál es el código que tienes para hacer el click?

Quiero pensar que es porque tu código se ejecuta antes de que se cargue esa parte del DOM.

Saludos


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: Tonics en 1 Julio 2020, 13:35
Estoy creando un boton para asegurarme que esta la pagina cargada.
Espero a que cargue por completo y luego presiono el boton, pero no encuentra el id


Código:
// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  
alert(document.getElementById("interContainer").innerHTML);


});


Tambien probe esto y nada :

Código:
  alert(document.getElementById("interContainer").children.length);


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: [u]nsigned en 1 Julio 2020, 18:43
Como estas manejando la carga de la pagina? yo llevo bastante tiempo usando Greasemonkey.

Si tenes jquery disponible en la web que vas a automatizar es de mucha ayuda, pero sino igual se puede con js vanilla.

Yo lo que hago es esto:

1) encapsular toda mis funcionalidades de greasemonkey dentro de una solo funcion. Puedo modular mi codigo dentro de muchas funciones globales, pero al final toda la logica y la llamada a estas funciones mias las encapsulo en una sola funcion, por ejemplo digamos que se llama "gm_main".
2) En mi script de greasemonkey ejecuto una funcion auto-ejecutable, y dentro de esta asigno un event handler al evento onload de body. Y a dicho handler le paso mi funcion gm_main, de modo que esta se ejecutara recien cuando el DOM ya este 100% cargado y renderizado, junto con todos sus scripts, imagenes, etc.

Algo asi:

Código
  1. // ==UserScript==
  2. // @name         ScriptDePrueba
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Script de prueba
  6. // @author       unsigned
  7. // @match        https://tu-web.target.com/la_pagina.php
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. function gm_main(){
  12.   // 1. Create the button
  13.   var button = document.createElement("button");
  14.   button.innerHTML = "Do Something";
  15.  
  16.   // 2. Append somewhere
  17.   var body = document.getElementsByTagName("body")[0];
  18.   body.appendChild(button);
  19.  
  20.   // 3. Add event handler
  21.   button.addEventListener ("click", function() {
  22.  
  23.   alert(document.getElementById("interContainer").innerHTML);
  24.  
  25.  
  26. });
  27. }
  28.  
  29. (function() {
  30.    'use strict';
  31.  
  32.    window.onload = gm_main();
  33.  
  34. })();
  35.  

Lo que si, te aconsejo de debugges tu script de greasemonkey en la consola del navegador, para ver que puede estar fallando. Te dejo un script de ejemplo basado en el tuyo para agregar un boton al index de este foro que al presionarlo te muestre un alert con tu username.

Código
  1. // ==UserScript==
  2. // @name         ScriptDePrueba
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Script de prueba
  6. // @author       unsigned
  7. // @match        https://foro.elhacker.net/index.php
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. function gm_main(){
  12.   // 1. Create the button
  13.   var button = document.createElement("button");
  14.   button.innerHTML = "Do Something";
  15.  
  16.   // 2. Append somewhere
  17.   var body = document.getElementsByTagName("body")[0];
  18.   body.appendChild(button);
  19.  
  20.   // 3. Add event handler
  21.   button.addEventListener ("click", function() {
  22.  
  23.   alert(`Hola ${document.querySelector(".profile_info> b").innerHTML}`);
  24.  
  25.  
  26. });
  27. }
  28.  
  29. (function() {
  30.    'use strict';
  31.  
  32.    window.onload = gm_main();
  33.  
  34. })();
  35.  

Como ves en la linea 7 de ambos scripts es necesario indicar la url donde el script se va a ejecutar, también podes usar wildcards como asteriscos para urls dinámicas. Si no pones correctamente esta URL tu script nunca se ejecutara. Tambien anda tirando algunos console.log para depurar, como te decia antes.


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: Tonics en 1 Julio 2020, 19:01
Nada. no encuentra el nodo.

Use tu ejemplo adaptandolo y no encuentra el id.

Esta es la url que intento automatizar:


 https://vercanalestv1.com/ver-tve-1-la-1-online-en-directo-gratis-24h-por-internet/ (https://vercanalestv1.com/ver-tve-1-la-1-online-en-directo-gratis-24h-por-internet/)


Código:
// ==UserScript==
// @name         ScriptDePrueba
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Script de prueba
// @author       unsigned
// @match        https://vercanalestv1.com/ver-tve-1-la-1-online-en-directo-gratis-24h-por-internet/
// @grant        none
// ==/UserScript==
 
function gm_main(){
   // 1. Create the button
   var button = document.createElement("button");
   button.innerHTML = "Do Something";
 
   // 2. Append somewhere
   var body = document.getElementsByTagName("body")[0];
   body.appendChild(button);
 
   // 3. Add event handler
   button.addEventListener ("click", function() {
 
   alert(`Hola ${document.querySelector(".headerbar").innerHTML}`); // HEADERBAR ES LA CLASE DEL DIV
 
 
});
}
 
(function() {
    'use strict';
 
    window.onload = gm_main();
 
})();


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: #!drvy en 1 Julio 2020, 19:07
Estas targeteando contenido dentro de un iframe. Y el iframe no esta en el mismo dominio que la página esa ende javascript no puede ayudar en esa página en especifico. Tendrias que targetear la propia pagina del iframe:

//vergol.com/canales228/live/la1.php

Saludos


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: Tonics en 1 Julio 2020, 19:12
No entiendo eso de targetear el iframe...
Me puedes dar mas informacion para buscar en mi amigo google?


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: [u]nsigned en 1 Julio 2020, 19:51
Encima es un iframe dentro de otro iframe, se podría hacer con greasemonkey, pero esta muy complicado y tendrás que hilar muy fino...que es lo que queres hacer concretamente? Que te cierre los ads y te abra el canal?

yo creo que seria mas sencillo seguir haciéndolo a mano....

No entiendo eso de targetear el iframe...
Me puedes dar mas informacion para buscar en mi amigo google?

Se refiere que dentro del iframe se carga una página que está en un dominio diferente, y este a su vez carga otro iframe....


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: #!drvy en 1 Julio 2020, 20:13
El enlace que pasas, no tiene ningún div con id interContainer. Donde si que existe ese ID es dentro del iframe que apunta a la URL que te pase (vergol.com).

(https://i.imgur.com/w6aqGf9.png)

De hecho esta dentro de 2 iframes:



Al estar dentro de un iframe y que el iframe apunte a otro dominio, javascript no puede hacer nada dentro. Puedes leer sobre eso buscado Crossdomain, same-origin o CORS.


Lo que tendrias que hacer es que tu script de greasemonkey, apuntase a ese dominio. Tomando de ejemplo lo que ha pasado el compañero y cambiando la URL quedaria así:


Código:
// ==UserScript==
// @name         ScriptDePrueba
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Script de prueba
// @author       unsigned
// @match        https://vergol.com/canales228/live/la1.php
// @grant        none
// ==/UserScript==
 
function gm_main(){
   // 1. Create the button
   var button = document.createElement("button");
   button.innerHTML = "Do Something";
 
   // 2. Append somewhere
   var body = document.getElementsByTagName("body")[0];
   body.appendChild(button);
 
   // 3. Add event handler
   button.addEventListener ("click", function() {
       alert(document.getElementById("interContainer").innerHTML);
   });
}
 
(function() {
    'use strict';
 
    window.onload = gm_main();
 
})();


Y si abres directamente esa url, verás que si funciona.. Ahora tienes otros 2 problemas.

- La pagina original no muestra todo el contenido del iframe. Muestra solo los primeros 600 pixeles. Por lo tanto no ves el boton.
- Greasemonkey no parece cargarse cuando la página se ejecuta dentro de un iframe.

Buscando, he llegado a esto:

https://github.com/greasemonkey/greasemonkey/issues/2574

Donde se menciona que a partir de X actualización, ha dejado de ejecutar los scripts dentro de iframes. Al parecer hay un workaround que es cambiar el iframe por un embed, pero tendrias que cambiarlo tanto en la página principal como en el primer iframe.  Otros directamente dicen que mejor usar otras cosas como Tampermonkey.


He instalado Tampermonkey y efectivamente si que funciona bien:

Código
  1. // ==UserScript==
  2. // @name         ScriptDePrueba
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Script de prueba
  6. // @author       unsigned
  7. // @match        https://vergol.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. function gm_main(){
  12.    var container = document.getElementById('interContainer');
  13.  
  14.    // Si el contendor no existe, no me ejecuto.
  15.    if (container.length < 1) {
  16.        return;
  17.    }
  18.  
  19.    alert(document.getElementById("interContainer").innerHTML);
  20. }
  21.  
  22. (function() {
  23.    'use strict';
  24.    window.onload = gm_main();
  25. })();

Saludos


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: [u]nsigned en 1 Julio 2020, 21:31
De hecho GreaseMonkey es un fork de Tampermonkey, porque este este ultimo al principio de los tiempos no tenia soporte para Chrome, solo estaba disponible para Firefox.


Título: Re: Ayuda. getelementbyid() no encuentra el nodo.
Publicado por: Tonics en 2 Julio 2020, 16:31
Exacto.

En tapermonkey funciona perfecto... pero necesito hacerlo en greasemonkey.

No consigo acceder al segundo iframe



Código:
var button = document.createElement('button');
button.innerHTML = 'Do Something';

var body = document.getElementsByTagName('body')[0];
body.appendChild(button);

button.addEventListener ('click', function() {
  
  
  
  contentWindow
  
var iframe = document.getElementsByTagName('iframe')[0];

var iframe2 = iframe.contentWindow.getElementsByTagName('iframe')[0];
  
      
alert(iframe2);

});

Me podrias poner un ejemplo de acceso a un embed?