JavaScript RemoveatTribe no funciona en IE para los valores de HREF y ONCLICK -- javascript campo con html campo con internet-explorer campo con dom camp Relacionados El problema

JavaScript removeAttribute not working in IE for href and onclick values


1
vote

problema

Español

Estoy haciendo un calendario de Adviento en línea donde solo puedes abrir la puerta del día. Todas las puertas usan JavaScript OnClick para mostrar la oferta, por ejemplo, 'DOORTE10' ...

  <a href="javascript:void(0)" onclick = "document.getElementById('door10').style.display='block';document.getElementById('fade10').style.display='block'" id="door-10-link">   

Todos están creados con esto ONCLICK y luego al final del HTML, se ejecuta la siguiente función Javascript que elimina los atributos HREF y ONCLICK de las puertas que no están hoy, eliminando así la capacidad de abrirlos.

  function disableDoor(num) { var today = new Date(); var day = today.getDate(); var calendar_day = num; if (calendar_day == day) {           } else {     var string = "door-" + num + "-link";     var d = document.getElementById(string);     d.removeAttribute("href");     d.removeAttribute("onclick"); }   

Todo esto funciona bien en todo, excepto Internet Explorer, donde las puertas aún están mejoradas, aunque no deberían ser. El cursor no cambia al cursor de Hover y, si inspecciona el elemento, los valores de HREF y ONCLICK se han eliminado correctamente, sin embargo, aún puede "abrir la puerta" aunque no se indique HREF. El HTML ahora se ve así con los atributos eliminados correctamente ...

  <a id="door-10-link">   

En el inspector de IE, si "edito como HTML", no cambie nada, haga clic en Afuera para terminar la edición y actualizar la página, todo funciona bien y no puedo hacer clic en las puertas que no se supone. El elemento HREF se ha eliminado correctamente de la página.

Parece que los elementos en la página deben actualizar o algo después de que se ejecute Javascript. Mi conjetura es que es algo que ver con el Dom tal vez, pero soy bastante nuevo en esa área.

Cualquier ayuda sería brillante, ya que me consiguió correctamente perplejo.

gracias de antemano

Original en ingles

I'm making an online advent calendar where you can only open the door of the day. All the doors use JavaScript onclick to display offer eg, 'door10'...

<a href="javascript:void(0)" onclick = "document.getElementById('door10').style.display='block';document.getElementById('fade10').style.display='block'" id="door-10-link"> 

They're all created with this onclick and then at the end of the HTML the following JavaScript function runs which removes the href and onclick attributes of the doors that aren't today, thus removing the ability to open them.

function disableDoor(num) { var today = new Date(); var day = today.getDate(); var calendar_day = num; if (calendar_day == day) {           } else {     var string = "door-" + num + "-link";     var d = document.getElementById(string);     d.removeAttribute("href");     d.removeAttribute("onclick"); } 

This all works fine in everything but Internet Explorer where the doors are still clickable even though they shouldn't be. The cursor doesn't change to the hover cursor and if you inspect the element the href and onclick values have been correctly removed, yet you can still 'open the door' even though no href is stated. The HTML now looks like this with the attributes correctly removed...

<a id="door-10-link"> 

In the IE inspector, if I 'Edit as HTML', don't change anything, click outside to finish editing and refresh the page it all works fine and I can't click the doors I'm not supposed to. The href element has been properly removed from the page.

It seems like the elements on the page need to refresh or something after the JavaScript has run. My guess is it's something to do with the DOM maybe but I'm pretty new to that area.

Any help would be brilliant as it's got me properly stumped.

Thanks in advance

           
 
 

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Esto parece ser una regresión en Internet Explorer 11; Revisé tanto a Internet Explorer 9 como 10, y ninguno de los dos reprobaría el problema. He presentado un error internamente para que nuestro equipo vea resolver el problema tan pronto como podamos. Puede comprobar http://remote.moden.ie Moving hacia adelante si lo desea. Construí un pequeño violín que demuestra un problema.

Con este proyecto en particular, en realidad lo alentaría a que tome una ruta alternativa y se detenga un simple oyente de eventos en lugar de derribar condicionalmente docenas de oyentes preexistentes. Como un ejemplo rápido de lo que quiero decir, considere lo siguiente:

  (function () {      "use strict";      var day = (new Date).getDate(),         doors = document.querySelectorAll( "div" );      doors.item( --day ).addEventListener( "click", function openDoor () {         this.classList.toggle( "open" );     });  }());   

En lo anterior, solo la puerta de hoy se desbloqueará: todas las demás puertas permanecerán bloqueadas. Puede ver la demo real en línea en http://jsfiddle.net/jonathansampson/n4ed6uw5/ . < / p>

Espero que este trabajo sea ayuda; Mientras tanto, trabajaré con mi equipo para resolver la regresión.

 

This appears to be a regression in Internet Explorer 11; I checked both Internet Explorer 9 and 10, and neither of the two would repro the issue. I've filed a bug internally to have our team look at resolving the issue as soon as we are able. You can check http://remote.modern.ie moving forward if you like. I constructed a small fiddle that demonstrates issue.

With this particular project, I would actually encourage you to take an alternate route and stand up a single event listener rather than conditionally tearing down dozens of pre-existing listeners. As a quick example of what I mean, consider the following:

(function () {      "use strict";      var day = (new Date).getDate(),         doors = document.querySelectorAll( "div" );      doors.item( --day ).addEventListener( "click", function openDoor () {         this.classList.toggle( "open" );     });  }()); 

In the above, only today's door will be unlocked xe2x80x94 all other doors will remain locked. You can view the actual demo online at http://jsfiddle.net/jonathansampson/n4ed6uw5/.

I hope this work-around helps; in the meantime, I will be working with my team to resolve the regression.

 
 
0
 
vote

Pruebe la configuración d.onclick = null para deshabilitar el controlador OnClick.

 

Try setting d.onclick = null to disable the onclick handler.

 
 
0
 
vote

Podrías hacer esto con jQuery. Puede adjuntar un handler de clic al elemento y cada control de clics compruebe si se permite abrir.

Por el momento estoy usando un servidor de tiempo JSON porque si usa el tiempo del cliente, se puede modificar fácilmente y se podría abrir cada puerta.

Por favor revise el siguiente código. Si prefiere JSFiddle, puede encontrar el mismo código aquí . Está haciendo lo que estás planeando hacer. Solo agregue una popover en lugar de la alerta para mostrar la oferta y aplicar su estilo.

He usado METROUI CSS solo para hacer el estilo de las baldosas.

Para agregar sus ofertas, debe modificar el siguiente JSON

  var offers = [     {         'day': 1,         'offer': 'something for day'     },     {         'day': 2,         'offer': 'A 2GB USB Stick'     },      ... ];   

y agregue los 24 días y elimine las tres líneas después del comentario 'Copia profunda de la oferta'. Luego, puede usar el índice de sus ofertas JSON para adjuntar los datos a los elementos DOM.

Hay otro punto que debe mejorarse. Si los servidores de tiempo llevan demasiado tiempo, puede hacer clic en otro elemento y ambos aparecerán. El bloqueo de otros clics y / o una barra de progreso de carga ayudaría.

  var adventCalendar = (function () {      var MONTH = 10; //10 = November / 11 = December --> set to November for testing      var LAST_DAY = 30; // later 24 --> 30 just for testing            function Calendar() {          //console.log('constructor called');          this.init();      };      var offers = [{          'day': 1,              'offer': 'something for day'      }];      // later you would have for each day a different offer.        Calendar.prototype.init = function () {          var offers24days;          var $calendar = $('#adventCalendar');            for (var i = 1; i <= LAST_DAY; i++) {              // console.log(i);              // deep copy of offer              var newObject = jQuery.extend(true, {}, offers[0]);              newObject.day = i;              newObject.offer += ' ' + i;                            $door = $('<div class="tile rounded"/>')                  .text(i)                  .data(newObject)                  .appendTo($calendar);                var that = this; // store reference to this Calendar              $door.on('click', function () {                  var today = new Date();                  var $this = $(this);                  that.getTime('GMT', function (date) {                      // This is where you do whatever you want with the time:                      //console.log(date.getDate());                      var data = $this.data(); // today from time server                                            if ((data.day <= date.getDate()) && (date.getMonth() == MONTH)) {                          // Attention! Date month starts at 0 --> 0 = Januar & 10 = November                          // open allowed                          alert(data.offer); // later you can use a popover instead of an alert. This is just for the demo.                      } else {                          //alert('not allowed'); // just for testing                      }                  });              });          }      }        // get time from this SO question http://stackoverflow.com/questions/9486293/does-anyone-know-of-a-good-json-time-server      // zone not used because time server doesn't support it      Calendar.prototype.getTime = function (zone, success) {          //var url = 'http://json-time.appspot.com/time.json?tz=' + zone,          var url = 'http://time.jsontest.com/?', // no zone support other link is broken              ud = 'json' + (+new Date());          window[ud] = function (o) {              success && success(new Date(o.milliseconds_since_epoch)); //o.datetime));          };          document.getElementsByTagName('head')[0].appendChild((function () {              var s = document.createElement('script');              s.type = 'text/javascript';              s.src = url + 'callback=' + ud;              return s;          })());      }        return {          Calendar: Calendar      };  })();    $(function () {      var advent = new adventCalendar.Calendar();  });  
  .tile {      font-family: sans-serif;      font-size: 4em;      color: #E2E1E6;  }  
  <script src="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro.min.js"></script>  <link href="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-responsive.min.css" rel="stylesheet"/>  <link href="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">      <div id="adventCalendar" class="metro grid fluid"></div>  </div>  
 

You could do this with jQuery. You can attach a click handler to the element and every click handler checks if it is allowed to open.

For the time I'm using a JSON time server because if you use the client time it can be easily modified and every door could be opened.

Please check the following code. If you prefer jsFiddle you can find the same code here. It's doing what you are planning to do. Just add a popover instead of the alert to show the offer and apply your styling.

I have used MetroUI CSS just to do the tile styling.

To add your offers you have to modify the following JSON

var offers = [     {         'day': 1,         'offer': 'something for day'     },     {         'day': 2,         'offer': 'A 2GB USB Stick'     },      ... ]; 

and add all 24 days and remove the three lines after the comment 'deep copy of offer'. Then you can use the index of your offers JSON to attach the data to the DOM elements.

There is another point that needs to be improved. If the time servers takes too long you can click at another element and both will popup. Blocking of other clicks and / or a loading progress bar would help.

var adventCalendar = (function () {      var MONTH = 10; //10 = November / 11 = December --> set to November for testing      var LAST_DAY = 30; // later 24 --> 30 just for testing            function Calendar() {          //console.log('constructor called');          this.init();      };      var offers = [{          'day': 1,              'offer': 'something for day'      }];      // later you would have for each day a different offer.        Calendar.prototype.init = function () {          var offers24days;          var $calendar = $('#adventCalendar');            for (var i = 1; i <= LAST_DAY; i++) {              // console.log(i);              // deep copy of offer              var newObject = jQuery.extend(true, {}, offers[0]);              newObject.day = i;              newObject.offer += ' ' + i;                            $door = $('<div class="tile rounded"/>')                  .text(i)                  .data(newObject)                  .appendTo($calendar);                var that = this; // store reference to this Calendar              $door.on('click', function () {                  var today = new Date();                  var $this = $(this);                  that.getTime('GMT', function (date) {                      // This is where you do whatever you want with the time:                      //console.log(date.getDate());                      var data = $this.data(); // today from time server                                            if ((data.day <= date.getDate()) && (date.getMonth() == MONTH)) {                          // Attention! Date month starts at 0 --> 0 = Januar & 10 = November                          // open allowed                          alert(data.offer); // later you can use a popover instead of an alert. This is just for the demo.                      } else {                          //alert('not allowed'); // just for testing                      }                  });              });          }      }        // get time from this SO question http://stackoverflow.com/questions/9486293/does-anyone-know-of-a-good-json-time-server      // zone not used because time server doesn't support it      Calendar.prototype.getTime = function (zone, success) {          //var url = 'http://json-time.appspot.com/time.json?tz=' + zone,          var url = 'http://time.jsontest.com/?', // no zone support other link is broken              ud = 'json' + (+new Date());          window[ud] = function (o) {              success && success(new Date(o.milliseconds_since_epoch)); //o.datetime));          };          document.getElementsByTagName('head')[0].appendChild((function () {              var s = document.createElement('script');              s.type = 'text/javascript';              s.src = url + 'callback=' + ud;              return s;          })());      }        return {          Calendar: Calendar      };  })();    $(function () {      var advent = new adventCalendar.Calendar();  });
.tile {      font-family: sans-serif;      font-size: 4em;      color: #E2E1E6;  }
<script src="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro.min.js"></script>  <link href="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-responsive.min.css" rel="stylesheet"/>  <link href="http://cdn.jsdelivr.net/metro-ui-css/2.0.23/min/metro-bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container">      <div id="adventCalendar" class="metro grid fluid"></div>  </div>
 
 

Relacionados problema

1279  ¿Cómo pongo / no tomar una cookie con jQuery?  ( How do i set unset a cookie with jquery ) 
¿Cómo configuro y no prestar atención a una cookie utilizando jQuery, por ejemplo, cree una cookie llamada test y configure el valor en 1 ? ...

0  Realización de jquery show / ocultar en contenido creado dinámicamente  ( Performing jquery show hide on dynamically created content ) 
Tengo una página que creé con jQuery, y en esta página es una tabla donde las filas de la tabla tienen nombres de clase que los identifican como un cierto col...

0  Solo carga HTML en un iframe  ( Only load html into an iframe ) 
¿Cómo puedo cargar solo el HTML de una página en un iframe, sin activar automáticamente la descarga de todos los CSS, scripts, imágenes, videos en la página? ...

5  ¿Por qué Internet Explorer abre la presentación de forma en una nueva ventana y no en un iframe insertado dinámicamente?  ( Why does internet explorer open form submission in a new window and not in a dyn ) 
Estoy tratando de publicar un formulario a un iframe oculto, insertado dinámicamente, pero en Internet Explorer, el envío del formulario se abre en una nueva ...

3  ¿Hay alguna manera de detectar un cambio de nodo dom en JavaScript?  ( Is there a way to detect a dom node change in javascript ) 
Estoy buscando una forma de detectar si algo cambia dentro de un nodo DOM dado. ¿Hay algún evento u otra técnica que haga esto? ¡Gracias! ...

18  ¿Cómo cambiar el tamaño de un contenedor DIV a la altura total de sus hijos?  ( How to resize a container div to the total height of its children ) 
Tengo un elemento de contenedor que necesito cambiar de tamaño a medida que cambie su contenido. Contiene 2 divs absolutamente posicionados que pueden cambiar...

4  ¿Cómo copia un elemento de estilo en línea en IE?  ( How do you copy an inline style element in ie ) 
IE no permite escribir la propiedad INTERHTML de los elementos de estilo o cabeza. Entonces, ¿cómo copia un elemento de estilo de la cabeza de un documento a ...

1371  ¿Cómo puedo averiguar qué elemento DOM tiene el enfoque?  ( How do i find out which dom element has the focus ) 
Me gustaría averiguarlo, en Javascript, qué elemento actualmente se ha centrado. He estado mirando a través de la DOM y no he encontrado lo que necesito, toda...

0  Reemplace todas las imágenes con elemento DIV de fondo  ( Replace all images with div background element ) 
var all = document.getElementsByTagName( 'img' ); for( i = 0; i < all.length; i++ ){ var newimg; (newimg=document.createElement('div')).style.cssText...

0  Valor que pasa a las funciones de Listener  ( Passing value to eventlistener functions ) 
for ( var i=0; i<thumbs.length; i++) { var num = i; Core.addEventListener(thumbs[i], "click", Slide.thumbClick); } En el código anterior, quiero...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos