Ich versuche die Skyscanner-API dynamisch zu laden, aber es scheint nicht zu funktionieren. Ich habe alles versucht, was mir einfiel, und alles, was passiert, verschwindet.
Ich habe versucht, console.log, die keine Ergebnisse gibt; Ich habe Elemente aus den chrome-Entwicklertools ausprobiert, und während der CSS-Inhalt aller Inhalte gleich bleibt, verschwindet der Inhalt (ich dachte, er könnte display hinzufügen: none auf der html / body-Art). Ich habe alle asynchronen Tricks von Google ausprobiert, noch einmal eine leere Seite. Ich habe alle js Plugins für asynchronen Laden mit immer noch die gleichen Ergebnisse versucht.
Skyscanners API-Dokumentation ist schlecht und während sie einen Callback anbieten, funktioniert sie nicht so, wie es der Google-API-Callback tut.
Beispiel: Ссылка
Beispiel mit Lade-API im Kopfbereich: Ссылка
Wie kann ich die API auf Knopfdruck oder Async laden? Ohne dass sich die Datei im HEAD-Bereich befindet. Wenn es eine Möglichkeit gibt, zu verhindern, dass document.write die Seite leer oder auf andere Weise macht. Ich hätte nichts dagegen, plain js, jQuery oder PHP zu benutzen.
BEARBEITEN:
Ich habe eine Bounty von 250 auf die 50 gesetzt, die ich vorher hatte.
Orlando Leite beantwortete eine sehr genaue Idee, wie man diese asynchrone API laden kann, obwohl einige Funktionen nicht funktionieren, wie das Auswählen von Daten und ich kann das Styling nicht einstellen.
Ich bin auf der Suche nach einer Antwort, von der ich alle Funktionen nutzen kann, so dass es so funktioniert, wie es funktionieren würde, wenn es beim Laden geladen wird.
Hier ist die aktualisierte Geige von Orlando: Ссылка
-
EDIT 2 ON Gijs ANTWORT:
Gijs erwähnte zwei Links zum Überschreiben von document.write. Das klingt nach einer großartigen Idee, aber ich denke, es ist nicht möglich, das zu erreichen, was ich versuche.
Ich habe John's Resig Weg verwendet, um document.write zu verhindern, das hier gefunden werden kann: Ссылка
Wenn ich diese Methode verwendet habe, lade ich die API erfolgreich, aber die Datei snippets.js wird überhaupt nicht geladen.
Geige: Ссылка
Für problematische Fälle wie diesen können Sie document.write einfach überschreiben. Hacky wie die Hölle, aber es funktioniert und du wirst entscheiden, wohin der ganze Inhalt geht. Siehe z. diesen Blogpost von John Resig . Dies ignoriert IE, aber mit ein wenig Arbeit funktioniert der Trick auch im IE, siehe z. diesen Blogpost .
Also würde ich vorschlagen, document.write mit Ihrer eigenen Funktion zu überschreiben, die Ausgabe wo nötig zu stapeln und sie dort zu platzieren, wo Sie möchten (zB in einem div am unteren Rand von <body> '). Das sollte verhindern, dass das Skript den Inhalt Ihrer Seite aufschlüsselt.
Bearbeiten: OK, ich hatte also etwas Zeit, um in dieses Skript zu schauen. Verwenden Sie zu einem späteren Zeitpunkt etwas wie Ссылка , um Skripts von Drittanbietern zu untersuchen. Viel einfacher zu lesen. Glücklicherweise gibt es kaum eine Verschleierung / Verfälschung, und so haben Sie eine Ergänzung für ihre API-Dokumentation (die ich übrigens nicht finden konnte - ich fand nur "Code-Assistenten", an denen ich kein Interesse hatte) .
Hier ist ein fast funktionierendes Beispiel: Ссылка
Hier sind die Schritte, die ich gemacht habe:
document.write . Dies muss geschehen, bevor Sie das ursprüngliche Skript laden. Ihre Ersetzungsfunktion sollte ihre Zeichenfolge an das DOM anhängen. Rufe nicht das alte document.write auf, das bringt dir nur Fehler und macht sowieso nicht das, was du willst. In diesem Fall haben Sie Glück, da sich der gesamte Inhalt in einem einzigen document.write -Aufruf befindet (überprüfen Sie die Quelle des ursprünglichen Skripts). Wenn dies nicht der Fall wäre, müssten Sie alles so lange stapelweise verarbeiten, bis der von Ihnen angegebene HTML-Code gültig war und / oder Sie sicher waren, dass nichts anderes mehr kam. $.getScript oder gleichwertig. Übergeben Sie eine Callback-Funktion (ich habe eine Referenz für die benannte Funktion aus Gründen der Übersichtlichkeit verwendet, aber Sie können sie inline einfügen, wenn Sie dies bevorzugen). Edit # 2: Hah, sie haben eine API ( skyscanner.loadAndWait ), um einen Callback zu bekommen, sobald ihr Skript geladen ist. Das funktioniert:
(Hinweis: Dies scheint immer noch eine interne Timeout-Schleife zu verwenden)
Ich glaube, was Sie wollen, ist es:
%Vor%Es ist skyscanner in Iframe laden # sky_loader, nach Aufruf geladen Funktion zum Erstellen der SearchPanelControl. Aber am Ende zieht Snippet das Hauptdokument ein. Es ist wirklich eine bizarre Problemumgehung, aber es funktioniert.
Die einzige Einschränkung ist, dass Sie einen iframe benötigen. Aber Sie können es mit display:none ausblenden.
BEARBEITEN
Tut mir leid, ich habe es nicht gesehen. Jetzt können wir sehen, wie skyscanner API schrecklich ist. Es setzt zwei divs, um die Autovervollständigung zu machen, aber nicht relativ zu dem Element, das Sie zum Zeichnen aufrufen, sondern das Dokument. Wenn ein Skript in einen Iframe geladen wird, ist das Dokument das Iframe-Dokument.
Es gibt eine Lösung, aber ich empfehle nicht, ist wirklich eine Abhilfe:
%Vor% Laden Sie einen iframe mit einem anderen html, der beim Laden des Snippets lädt und zurückruft. Nach dem Laden erstellen Sie das Snippet, wo Sie wollen, und nach einem Timeout, weil wir nicht wissen können, wann das SearchPanelControl geladen ist. Diese realWorkaround verschiebt die Autocomplete-Divs in das Hauptdokument.
Sie können hier ein Arbeitsbeispiel sehen
BEARBEITEN
Der Fehler wurde behoben und der Link aktualisiert.
die for Schleife ist weg und hat eine Weile hinzugefügt, funktioniert jetzt besser.
In der Datei skyrunner.js verwenden sie document.write, um die Seite beim Lade-Callback leer zu machen ... Also, hier sind einige Konsequenzen in Ihrem Szenario.
Hier müssen Sie mit der Old-School-Ansatz gehen, das ist .. Sie sollten Ihre skyrunner.js Datei an der Spitze des Kopfes Inhalt enthalten.
Versuchen Sie also, diese Datei herunterzuladen und in das head-Tag einzufügen.
Danke
Tags und Links javascript jquery api