Ich habe einige Probleme mit einem iOS Smart App-Banner , die ich durch JavaScript hinzufügen möchte.
Der eigentliche Smartbanner ist so einfach wie das Hinzufügen dieses kleinen Blocks zum Kopf des HTML:
%Vor%Leider bin ich ziemlich eingeschränkt in der Art, wie ich mein Skript hochladen kann. Ich kann den HTML-Code nicht direkt ändern, also mache ich das über unseren Tag-Manager, der im Grunde über JavaScript funktioniert. Aber es stellt sich heraus, dass dies nicht funktioniert.
Ich habe versucht, den Fall zum Testen zu vereinfachen:
Hardcodiertes Tag im HTML: funktioniert (wie erwartet)
%Vor%Wird direkt nach der Fertigstellung des Dokuments mit JavaScript eingefügt: funktioniert
%Vor% Wird mit JavaScript nach einer setTimeout Verzögerung eingefügt: FUNKTIONIERT NICHT
Kann jemand bestätigen oder erklären, warum dieses verzögerte JavaScript nicht funktioniert?
Wichtig: Zum Testen öffnen Sie die Seite auf einem echten iOS-Gerät! Desktop Safari / Chrome oder iOS Emulator funktioniert nicht. Auch schließt das Banner nicht , da es nicht ein zweites Mal angezeigt wird.
AKTUALISIEREN :
Ich habe einige Beispiele ohne jQuery hinzugefügt, also einfach JavaScript. Aber die Ergebnisse sind die gleichen. Sobald wir auf setTimeout() warten, kann das Smart App Banner nicht geladen werden.
Vanille JavaScript - direkte Ausführung. funktioniert
%Vor%Vanille JavaScript - verzögerte Ausführung. FUNKTIONIERT NICHT
%Vor%UPDATE 2 :
Das genau gleiche unglückliche Verhalten kann beobachtet werden, wenn das Skript asynchron geladen wird
Asynchrones Laden FUNKTIONIERT NICHT
%Vor%Was dann das gleiche Vanilla-JavaScript mit direkter Ausführung aufruft showBanner ();
%Vor%SCHLUSSFOLGERUNG :
Ich kann nur schlussfolgern, dass iOS Safari nur den Smartbanner des HTML im primären Thread sucht. Und das macht mich traurig: - (
Nur das direkt verfügbare HTML oder HTML, das synchron über JavaScript hinzugefügt wird.
Aber keine a-sync-Aktion ist zulässig, sei es das Laden des JavaScript asynchron oder die Verwendung von setTimeout() (oder eines anderen Konstrukts, das eval() verwendet)
Da es nicht möglich ist, eine Safari anzuzeigen, wird das native Banner angezeigt, wenn es nach dem Laden der Seite eingefügt wird (wie oben getestet und bestätigt nach Apfel), ist die einzige praktikable Lösung, den nativen Smartbanner nicht zu verwenden, sondern einen eigenen zu erstellen.
Zum Beispiel mit einem Javascript-Plugin wie das
Tags und Links javascript ios mobile-safari smartbanner