CÓMO
Probar localmente <iframe> HTML generado de ArcGIS Survey123 usando el módulo http.server de Python
Resumen
Los formularios de ArcGIS Survey123 se pueden integrar en sitios web usando un elemento <iframe> HTML. La aplicación web de ArcGIS Survey123 puede generar <iframe> HTML para cualquier encuesta compartida públicamente en la pestaña Colaborar de la encuesta (Encuesta > Compartir encuesta > Compartir esta encuesta > Integrar). El elemento <iframe> generado se puede copiar/pegar en el HTML de un sitio web.
Puede resultar útil observar cómo aparece o se comporta un formulario de Survey123 cuando se integra en un sitio web utilizando un elemento <iframe>. Sin embargo, un archivo HTML de prueba que incluye un <iframe> generado de Survey123 no se carga como archivo en su navegador web. En su lugar, se debe servir a través de HTTP. Consulte la documentación de Mozilla sobre cómo abrir archivos HTML localmente para obtener más información.
Procedimiento
Se puede servir a sí mismo archivos HTML de prueba con elementos <iframe> generados de Survey123 usando el módulo http.server de Python, suponiendo que Python está instalado y las Herramientas de administración web de IIS de Windows y los servicios World Wide Web están habilitados.
- Comience creando un archivo HTML en su equipo con un editor de texto como Notepad++ o VS Code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Survey123 iframe test</title> </head> <body> </body> </html>
Nota: Guardar este archivo en una nueva carpeta facilita los siguientes pasos.
- Una vez creado el archivo HTML, copie/pegue el elemento <iframe> generado de Survey123 en el HTML, pegando el elemento <style> dentro del elemento <head> y los elementos <div>/<iframe> dentro del elemento <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>
- Vea el archivo HTML en un navegador web para probar la apariencia y el comportamiento de la encuesta integrada. Como se indicó, a diferencia de los archivos HTML más sencillos, no podemos abrir el archivo directamente en nuestro navegador a través de la ruta del archivo local, pero podemos servírnoslo nosotros mismos a través de HTTP utilizando el módulo http.server de Python.
- Abra una ventana de comandos o una ventana de comandos de Python.
- Navegue hasta la carpeta donde se guarda el archivo HTML con el comando cd, por ejemplo: cd .\Desktop\Test
- Pegue python -m http.server después de la ventana de comandos y pulse Intro.
- En un navegador web, abra http://localhost:8000/ y haga clic en el archivo HTML que acaba de crear. Se debe cargar en la pestaña de su navegador.
- Cuando termine de inspeccionarlo, vuelva a la ventana de comandos o ventana de comandos de Python y pulse Ctrl+C para dejar de servir.
Id. de artículo: 000026171
Recibir notificaciones y encontrar soluciones a problemas nuevos o comunes
Obtenga respuestas resumidas y soluciones de vídeo de nuestro nuevo chatbot de IA.
Información relacionada
Descubrir más sobre este tema
Search for related information
Find training related to this topic
Explore ideas and give feedback
Obtener ayuda de expertos en ArcGIS
Descargar la aplicación de soporte de Esri