Javascript modal über Flash-Spiele, in allen Browsern

Question

So haben wir ein seltsames Problem bei der Arbeit. Wir müssen ein Flash-Spiel anzeigen, das die Tastatur verwendet, wenn das Spiel endet, löst es ein modales Popup über Javascript aus. Wir verwenden den wmode-Parametersatz auf opaque, so dass das Modal auf der Oberseite des Flash-Elements angezeigt wird.

Alles funktioniert gut, außer in IE6/7. Wenn Sie die AUF- oder AB-Tasten auf der Tastatur drücken, scrollt die Seite nach oben und unten sowie die Tastatureingabe zum Spiel.

Die einzige Lösung, die wir dazu gefunden haben, ist, das classid Attribut vollständig aus dem object Tag zu entfernen. Aber das bewirkt, dass das Flash-Element in unserem IE6/7 über unser Javascript-Modal angezeigt wird.

So scheint es, wir können nur das eine oder das andere haben, aber nicht beide, wenn wir IE unterstützen wollen.

Jede Hilfe, Hinweise, Hinweise oder irgendetwas wäre toll, denn es gibt nicht wirklich viel online über diese Probleme. Zumindest nicht nach Google.

Answer 1

Ich bin mir nicht sicher, dass dies die beste Lösung ist, aber Sie könnten die Tastaturereignisse im Browser (oder einfach im IE) binden, damit sie nicht brennen, solange der Besucher das Spiel spielt. onkeyup, onkeydown und onkeypress sind die zu betrachtenden Ereignisse. Auf diese Weise können Sie das Objekt-Tag dort einfügen und gleichzeitig das Standard-Scroll-Verhalten verhindern.

Hoffe, das hilft!

Answer 2

Eine einfache Lösung wäre, den Überlaufstil für das body/html-Element auf Ihrer Seite auf versteckt zu ändern. Dies deaktiviert das Blättern der Seite, sollte jedoch Ihre Position auf der Seite beibehalten.

//toggle this on and off when showing the window 
document.body.style.overflow = 'hidden'; 

Answer 3

ok, nach 2 Tagen im Internet nach der Antwort suchen i eine reine JS-Funktion gefunden haben, die es in allen Browsern zu beheben!

los gehts:

function fix_flash() { 
    // loop through every embed tag on the site 
    var embeds = document.getElementsByTagName('embed'); 
    for (i = 0; i < embeds.length; i++) { 
     embed = embeds[i]; 
     var new_embed; 
     // everything but Firefox & Konqueror 
     if (embed.outerHTML) { 
      var html = embed.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i)) 
       new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'"); 
      // add a new wmode parameter 
      else 
       new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' "); 
      // replace the old embed object with the fixed version 
      embed.insertAdjacentHTML('beforeBegin', new_embed); 
      embed.parentNode.removeChild(embed); 
     } else { 
      // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF 
      new_embed = embed.cloneNode(true); 
      if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window') 
       new_embed.setAttribute('wmode', 'transparent'); 
      embed.parentNode.replaceChild(new_embed, embed); 
     } 
    } 
    // loop through every object tag on the site 
    var objects = document.getElementsByTagName('object'); 
    for (i = 0; i < objects.length; i++) { 
     object = objects[i]; 
     var new_object; 
     // object is an IE specific tag so we can use outerHTML here 
     if (object.outerHTML) { 
      var html = object.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i)) 
       new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />"); 
      // add a new wmode parameter 
      else 
       new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>"); 
      // loop through each of the param tags 
      var children = object.childNodes; 
      for (j = 0; j < children.length; j++) { 
       try { 
        if (children[j] != null) { 
         var theName = children[j].getAttribute('name'); 
         if (theName != null && theName.match(/flashvars/i)) { 
          new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />"); 
         } 
        } 
       } 
       catch (err) { 
       } 
      } 
      // replace the old embed object with the fixed versiony 
      object.insertAdjacentHTML('beforeBegin', new_object); 
      object.parentNode.removeChild(object); 
     } 
    } 
} 

jetzt können Sie nur in ausgeführt werden, wenn die Seite geladen mit jQuery:

$(document).ready(function() { 
      fix_flash();  
}