2

Necesito que la función hola() declarada en el archivo js afecte a ambos DOM, sin importar en que archivo, si A.hmtl o B.html, este el trigger de la función que en este caso se encuentra en el botón del archivo A.

Lo que busco hacer es una especie de currículo web, este estará hecho del clásico html, css y js (osea que correrá en los navegadores), sin embargo, este currículo no estará alojado en un servidor, ni va estar en Internet, ni nada por el estilo. Solo sera un compendio de archivos (no tan largos), bien organizados que al enviarselo a alguien, que sepa o no de programacion, lo unico que tendria que hacer es darle click a un archivo index y ya, podria verlos y moverse por donde quiera del mismo.

No se guardara nada, ni espero un feedback en cuanto a las cosas que la persona realice en ese currículo. Porque busco como hacer esto? Porque no quiero un html de 1.000.000 de lineas de código, por lo cual, quiero dividir las sub vistas que se desplegaran dependiendo de lo que se quiera ver (como angular hace). ya se como dividir las vistas ahora mi problemas es este, como altero las inclusiones que vienen desde otros archivos con js si el trigger que acciona la funcion esta en el archivo padre a donde todos llegaran.

Archivo A.html

<!DOCTYPE html>
<html id='aqui'>
<head>
    <title>hola</title>
</head>
<body>
    <div>
        <object id="hola-mundo" data="vista-1.html"></object>
    </div>
    <button onclick="hola()">
        <p>Cambiar</p>
    </button>
    <script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
    <script src="hola.js"></script>
</body>
</html>

Archivo B.html

<!DOCTYPE html>
<html id="alla">
<head>
    <title></title>
</head>
<body>
    <div id="vista-1">
        <p>hola mundo</p>
    </div>
    <button id="btn-2">
        <p>hola</p>
    </button>
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
      crossorigin="anonymous"></script>
    <script src="hola.js"></script>
</body>
</html>

Archivo hola.js

$('#btn-2').click(function(){
    $('p').css('color','blue')
})

function hola(){
    $('#aqui p').css('color','pink')
    $('#vista-1 p').css('color','pink')
}
13
  • 2
    ¿Cual es la verdadera razon detras de esto? ¿Necesitas actualizar la pagina B al presionar algo en la pagina A? Te lo pregunto, porque lo que estas planteando es imposible. Si ese fuera el caso, te lo estas planteando mal. Creo que algo como Meteor podría ayudarte, pero no soy experto en el tema. el 19 jul. 2017 a las 23:02
  • 2
    Y cuál es el problema en sí? el 19 jul. 2017 a las 23:03
  • 1
    He removido Stack Snippet porque este sólo debe usarse en código HTML/CSS/JavaScript que sea ejecutable en la página. En el caso de esta pregunta se está llamando a archivos por medio de rutas relativas pero estas no funcionan en Stack Snippet.
    – Rubén
    el 20 jul. 2017 a las 2:53
  • 1
    ¿Las páginas están abiertas en la misma computadora?¿O es en computadoras diferentes?
    – Alvaro Montoro
    el 20 jul. 2017 a las 4:47
  • 1
    Es mas si intenta el codigo que puse arriba, la funcion hola() le cambia el color al "p" del archivo A pero no llega a "p" del archivo B... ese es mi problema y llevo tiempo tratando de resolverlo. el 21 jul. 2017 a las 13:00

2 respuestas 2

1

Usando clases (ej: .soy-una-clase) y con jQuery puedes cambiarles a todos los elementos con esa clase, el estilo que vos quieras.

$('.button-changer').click(function(){
    $('.colorChange').css('color','blue');
})
.colorChange {
  display: inline-block;
  height: 200px;
  width: 200px;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="colorChange">Hello!</p>
<p class="colorChange">Hello!</p>
<button class="button-changer">Click me!</button>

Pen: https://codepen.io/bitxelus/pen/PKYwXy

1
  • 1
    Esto sólo afectaría a los elementos de la misma página, pero no a elementos de otra página diferente (sería un mismo DOM y no varios DOM diferentes como se espefica en la pregunta).
    – Alvaro Montoro
    el 21 jul. 2017 a las 13:27
0

Lo que puedes hacer es una función y llamarlo a través del atributos onclick de HTML. Todo aquellos elementos de html que lo invoquen podrán acceder a el. Por ejemplo:

//tu archivo js 
function hacerAlgo(event){
  // Agregar aqúi lo que quieres hacer
  //con event.target tienes acceso al elemento que invocó la función y jugar con el
  alert(event.target.innerText)
}
<html>
<head>
</head>
<body>
<h2>Página 1</h2>
<button onclick="hacerAlgo(event)">boton 1</button>
<h2>Página 2</h2>
<button onclick="hacerAlgo(event)">boton 2</button>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.