Analyse und Behandlung von Bildlaufleisten in HTML und eingebettetem Flash

Analyse und Behandlung von Bildlaufleisten in HTML und eingebettetem Flash
Bei der Entwicklung begegnen wir häufig dieser Situation:
a.swf wird der Webseite hinzugefügt. Sowohl auf a.swf- als auch auf HTML-Seiten gibt es Bildlaufleisten. Der Projektmanager schlug eine BT-Anforderung vor: Wenn die Maus a.swf scrollt, scrollt die HTML-Seite nicht, andernfalls scrollt die HTML-Seite!
Was ist zu tun?
Methode 1 :
1. Wenn die Maus in den Bildlaufbereich von a.swf bewegt wird: Weisen Sie JS an, den Maus-Bildlaufmonitor des Browsers zu entfernen.
2. Wenn die Maus aus dem Bildlaufbereich von a.swf herausbewegt wird: Weisen Sie JS an, einen Browser-Maus-Scroll-Listener hinzuzufügen.
3. Der Wmode von a.swf ist auf „Fenster“ eingestellt.
Zusammenfassung: Das Einstellen von wmode auf „Fenster“ entspricht möglicherweise nicht den Projektanforderungen, wodurch a.swf jede HTML-Seite darunter abdeckt. Wenn sich die Maus außerdem in den Scrollbereich von a.swf bewegt und Alt+Tab drückt, um die Seiten zu wechseln, wird JS nicht benachrichtigt, die Browser-Scrollüberwachung durch die Maus hinzuzufügen. Daher erfolgt nach dem Vorgang beim Zurückwechseln zur HTML-Seite kein Scrollvorgang.

Methode 2 :
1. a.swf bricht sein eigenes Überwachungsereignis für das Scrollen mit der Maus ab und fügt eine Schnittstelle zur Verarbeitung des Scrollens hinzu, die JS aufrufen kann, z. B. wheelToFlash(value).
2. Wenn die Maus in den Bildlaufbereich von a.swf bewegt wird: Informieren Sie JS, z. B. mouseIsInFlashWheelRange=true.
3. Wenn die Maus den Bildlaufbereich von a.swf verlässt: Informieren Sie JS, z. B. mouseIsInFlashWheelRange = false;
4.JS überwacht Maus-Scroll-Ereignisse. In der Ereignisüberwachungsverarbeitungsfunktion müssen wir die folgenden Urteile treffen
Javascript-Code:

Code kopieren
Der Code lautet wie folgt:

wenn(mouseIsInFlashWheelRange==true)
{
/**Rufen Sie die von a.swf bereitgestellte Schnittstelle auf, damit a.swf das Scrollen simuliert*/
/**"flash" ist die ID einer in HTML eingebetteten SWF-Datei, der Wert ist der Bildlaufwert der HTML-Bildlauftabelle*/
document.getElementById("flashID").wheelToFlash(Wert);
/**Verhindert das Aufsteigen von Mausereignissen auf HTML-Seiten, normalerweise event.preventDefault()*/
event.preventDefault();
}
anders
{
/**Behandeln Sie das normale Scrollen von HTML, wir müssen nichts tun*/
}

Zusammenfassung : Im Vergleich zu Methode 1 gibt es keine Einschränkung von wmode="window". Das Alt+Tab-Problem besteht weiterhin.
Hinweis : Beim Schreiben von JS-Code müssen wir auf Kompatibilitätsprobleme achten. Verschiedene Browser hören auf Mausereignisse und erhalten Scroll-Werte unterschiedlich!

<<:  Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets

>>:  Implementierung der QR-Code-Scanfunktion über Vue

Artikel empfehlen

So ändern Sie die Farbe der gesamten Zeile (tr), wenn die Maus in HTML stoppt

Verwenden Sie reines CSS, um die Hintergrundfarbe...

Was Sie über die automatische ID-Inkrementierung in MySQL wissen müssen

Einführung: Wenn wir MySQL zum Erstellen einer Ta...

Vue und React im Detail

Inhaltsverzeichnis 1. Panorama II. Hintergrund 1....

Installieren Sie mehrere PHP-Versionen für Nginx unter Linux

Wenn wir die LNPM-Serverumgebung installieren und...

Docker verwendet den Prune-Befehl, um das Nicht-Image zu bereinigen

Inhaltsverzeichnis Die Entstehung und Verwirrung ...

Eine kurze Diskussion über den CSS-Kaskadierungsmechanismus

Warum hat CSS einen Kaskadierungsmechanismus? Da ...

Node.js erstellt ein einfaches Crawler-Case-Tutorial

Vorbereitung Zuerst müssen Sie nodejs herunterlad...

Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...

Der Unterschied zwischen HTML, XHTML und XML

Entwicklungstrends: html (Hypertext-Markup-Sprache...

8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

<br />Es gibt zwar viele Tools zum Erstellen...

Häufige Fehler bei der Verwendung von React Hooks

React Hooks ist eine neue Funktion, die in React ...

Vue.js verarbeitet Icon-Symbole über Komponenten

Icon-Icon-Verarbeitungslösung Das Ziel dieses Dat...

Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets

Da die Version, die ich beim Lernen verwendet hab...