Iframe entfernen und Konflikte mit Bibliotheken vermeiden

Question

Wir haben eine Anwendung, um carrusel Bilder zu machen, und wir verwenden einen iframe, um in Webseiten einzufügen.

Wir wollen den iframe entfernen, und wir haben alle bereit, nur mit einem div zu arbeiten, so etwas wie dies, dass unsere Nutzer in ihre Seiten einfügen wird:

<script src="https://www.example.com/mycustom-carrusel.min.js"></script> 
<div id="custom-unique-id" style="width:100%;height:300px;"></div> 

Die MyCustom-carrusel.min .js hat alle unseren Code mit Schluck minimiert.

Unser Javascript wird unsere API aufrufen und alle notwendigen innerhalb der div, das Problem ist, dass wir einige Bibliotheken, wie jQuery und andere verwenden.

Wir möchten den Konflikt mit beispielsweise jQuery oder einer anderen Bibliothek, die Konflikte mit der Webseite des Benutzers verursachen könnte, verhindern.

Was ist die beste Technologie, um dies zu implementieren und einen möglichen Konflikt mit unserem Code zu verhindern?

Danke!

Answer 1

Die Isolation von Stilen und Skripten von der Seite, in die das Widget eingebettet ist, ist genau der Grund, warum normalerweise iframe verwendet wird. Verwenden Sie einfach weiterhin iframe.

In einem späteren (einmal in allen gängigen Browsern implementiert), statt iframe, könnten Sie die all CSS-Eigenschaft mit einem Wert von unset, initial oder revert, verwenden alle vererbten Stile für Ihr Widget Element und seine verschachtelten zurücksetzen Elemente und dann sicher Ihre eigenen Stile anwenden.

Für JS Bibliotheken im Allgemeinen gibt es wohl keinen universellen Weg, um Konflikte zu verhindern, aber speziell für jQuery, könnten Sie jQuery.noConflict(true) verwenden beide $ und jQuery Variablen zu befreien, um es für andere Bibliotheken möglich zu machen (einschließlich verschiedene Versionen von jQuery selbst) um diese Variablen wiederzuverwenden, aber nur so lange, wie Sie Ihre jQuery-Version einbinden können und jQuery.noConflict(true)vor die eigene jQuery-Version der Seite aufrufen (was unwahrscheinlich ist). Alternativ können Sie auch nur die Verwendung von Bibliotheken loswerden (Bibliotheken wie jQuery sind in den meisten Fällen derzeit nicht erforderlich), und stattdessen verwenden Sie einfach Ihr eigenes vanilla-JS-Skript oder, wenn Sie wirklich keine Bibliothek löschen können Code der Bibliothek (zusammen mit Ihrem eigenen Code, der die Bibliothek verwendet) in einer selbst ausgeführten anonymen Funktion, um zu verhindern, dass Variablen, die definiert werden, in den globalen Namespace gelangen.