HOW TO
Lokales Testen eines mit Survey123 erstellten <iframe> HTML-Elements unter Verwendung des http.server-Moduls von Python
Zusammenfassung
ArcGIS Survey123-Formulare können mit einem <iframe> HTML-Element in Websites eingebettet werden. Mit der ArcGIS Survey123 Web-App kann <iframe>-HTML für jeden öffentlich freigegebenen Survey erstellt werden unter der Survey-Registerkarte Zusammenarbeiten (Survey > Survey freigeben > Survey freigeben > Einbetten). Das generierte <iframe>-Element kann dann kopiert und in das HTML der Website eingefügt werden.
Es kann nützlich sein, zu beobachten, wie ein Survey123-Formular aussieht oder sich verhält, wenn es mit einem <iframe>-Element in eine Website eingebettet ist. Eine HTML-Testdatei, die ein mit Survey123 generiertes <iframe> enthält, wird jedoch nicht als Datei im Webbrowser geladen. Stattdessen muss es über HTTP bereitgestellt werden. Weitere Informationen zum lokalen Öffnen von HTML-Dateien finden Sie in Mozillas Dokumentation.
Vorgehensweise
HTML-Testdateien mit in Survey123 generierten <iframe>-Elementen können selbst bereitgestellt werden mit dem http.server Modul von Python, gesetzt den Fall, dass Python installiert ist und die IIS Webverwaltungstools und WWW-Dienste von Windows aktiviert sind.
- Erstellen Sie als Erstes eine HTML-Datei auf Ihrem Computer mit einem Text-Editor wie Notepad++ oder VS Code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Survey123 iframe test</title> </head> <body> </body> </html>
Hinweis: Es ist für die nächsten Schritte einfacher, wenn Sie diese Datei in einen neuen Ordner speichern.
- Sobald die HTML-Datei erstellt ist, kopieren Sie das erstellte Survey123 <iframe> Element und fügen Sie es in das HTML ein, indem Sie das Element <style> im Element <head> einfügen, und die <div>/<iframe> Elemente in das Element <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Survey123 iframe test</title> <style> .embed-container { position: relative; height: 0; padding-bottom: 80%; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } small { position: absolute; z-index: 40; bottom: 0; margin-bottom: -15px; } </style> </head> <body> <div class="embed-container"> <iframe name="survey123webform" width="500" height="400" frameborder="0" marginheight="0" marginwidth="0" title="Bug Map Zoom Level" src="//survey123.arcgis.com/share/ae9c15b587494647b5186d69e81d042f" allow="geolocation https://survey123.arcgis.com; camera https://survey123.arcgis.com"> </iframe> </div> <script>var survey123webform = document.getElementsByName('survey123webform')[0]; window.addEventListener("message", e => { if (e.data) { var t = JSON.parse(e.data); "survey123:onFormLoaded" === t.event && t.contentHeight && (survey123webform.parentNode.style.height = t.contentHeight + "px") && (survey123webform.parentNode.style["padding-bottom"] = "unset") } });</script> </body> </html>
- Sehen Sie sich die HTML-Datei in einem Webbrowser an, um das Aussehen und das Verhalten des eingebetteten Surveys zu testen. Wie schon gesagt, können wir die Datei im Gegensatz zu einfacheren HTML-Dateien nicht über den lokalen Pfad direkt im Browser öffnen, sondern wir können sie uns selbst über HTTP bereitstellen mit dem http.server-Modul von Python.
- Öffnen Sie eine Eingabeaufforderung oder eine Python-Eingabeaufforderung.
- Navigieren Sie zu dem Ordner, in dem die HTML-Datei gespeichert ist mit dem Befehl cd, zum Beispiel: cd .\Desktop\Test.
- Fügen Sie hinter dem Befehl python -m http.server ein und drücken Sie die Eingabetaste.
- Öffnen Sie in einem Webbrowser http://localhost:8000/ und klicken Sie auf die HTML-Datei, die Sie gerade erstellt haben. Sie sollte in der Registerkarte des Browsers geladen werden.
- Wenn Sie die Überprüfung abgeschlossen haben, kehren Sie zu der Eingabeaufforderung oder der Python-Eingabeaufforderung zurück, und drücken Sie Strg+C, um die Bereitstellung zu beenden.
Artikel-ID: 000026171
Holen Sie sich Unterstützung mit KI
Lösen Sie Ihr Problem schnell mit dem Esri Support AI Chatbot.
Zugehörige Informationen
Weitere Informationen zu diesem Thema erkunden
Search for related information
Find training related to this topic
Explore ideas and give feedback
Unterstützung durch ArcGIS-Experten anfordern
Beginnen Sie jetzt mit dem Chatten