--- title: roHtmlWidget slug: develop/es/rohtmlwidget docTags: createdAt: 2025-03-11T07:07:18.732Z --- Este objeto incrusta el motor de renderizado HTML Chromium, que puede renderizarse en pantalla completa o como widget. Puede mostrar múltiples instancias de *roHtmlWidget* al mismo tiempo. El equivalente en JavaScript es [htmlwidget](docId\:u0h_2it_pJXBWrEPf4-4n). :::hint{type="success"} **Consejo** Use el objeto [roKeyStore](docId\:lbUXtFjN_Z4R_AngLdPhU) para proporcionar certificados de cliente para sitios web. Use el objeto [roVirtualMemory](docId\:h9XUDZ-RzudWtuGLtWCIP) para configurar un repositorio de memoria virtual para Chromium. ::: ## Creación de objetos  El objeto *roHtmlWidget* se inicializa con un objeto *roRectangle* que especifica el tamaño y la posición del widget en la pantalla, y una matriz asociativa opcional, que define propiedades para el widget.  ```text CreateObject("roHtmlWidget", rect As roRectangle, properties As roAssociativeArray) ``` Las propiedades de una instancia de *roHtmlWidget* pueden configurarse con una matriz asociativa durante la inicialización o con métodos equivalentes después de la inicialización. Debido a que muchas propiedades de *roHtmlWidget* no pueden cambiarse sin volver a cargar la página (y pueden producir resultados impredecibles si se cambian mientras la página está en ejecución), recomendamos configurar las propiedades durante la inicialización cuando sea posible, en lugar de usar los métodos equivalentes. :::hint{type="danger"} Definir propiedades de inicialización para una instancia de *roHtmlWidget* deshabilita algunos métodos para esa instancia (por ejemplo, `SetTransform()`, `AddFont()`, `SetUserStylesheet()`). Consulte la sección “Métodos disponibles con inicialización” a continuación para obtener una lista de métodos disponibles. ::: ## Parámetros de inicialización La matriz asociativa pasada durante la inicialización puede tener los siguientes parámetros:  - `nodejs_enabled` bool: Habilita [Node.js](docId\:NrV_T0oESrUQTX-BogKwp)® en el widget. Este valor es `falso` de forma predeterminada. :::hint{type="info"} Recargar una página que tiene Node.js habilitado puede clasificarse como un comportamiento indefinido. El método recomendado para reiniciar una instancia de Node es destruir y reconstruir el objeto *roHtmlWidget* ::: - `focus_enabled` bool: Habilita el enfoque para eventos de mouse/pantalla táctil. Este valor es `verdadero` de forma predeterminada. - `mouse_enabled` bool: Habilita eventos de mouse/pantalla táctil/teclado USB. Este valor es `falso` de forma predeterminada. - `scrollbar_enabled` bool: Habilita barras de desplazamiento automáticas para contenido que no cabe en la ventana gráfica. Este valor es `falso` de forma predeterminada. El navegador usa barras de desplazamiento de estilo de escritorio de forma predeterminada, pero también pueden [configurarse para dispositivos móviles](docId\:HzH3CTIp_sOyjsBe3jwv5) también. - `enable_pdf_viewer` bool: Si esta marca no está definida, o es `falso`, el comportamiento predeterminado es generar un roHtmlWidgetEvent con la razón `solicitud-de-descarga` (comportamiento heredado). Si la marca está habilitada, el navegador renderizará el PDF. Este parámetro está disponible a partir de BOS 9.1.116 y versiones posteriores. - `pinch_to_zoom_enabled` bool: Habilita la funcionalidad de pellizcar para hacer zoom. Este valor es `falso` de forma predeterminada. - `force_gpu_rasterization_enabled` bool: Habilita la rasterización GPU para gráficos HTML. De forma predeterminada, la decisión de usar rasterización GPU se basa en la [lógica interna de Chromium](https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization). :::hint{type="info"} Esta configuración ha quedado obsoleta. A partir de OS8, la rasterización GPU está habilitada de forma predeterminada y establecer esta propiedad no tiene efecto. ::: - `canvas_2d_acceleration_enabled` bool: Habilita la aceleración de canvas 2D. Esto mejorará la velocidad de fotogramas de la mayoría de las páginas HTML que usan animaciones 2D, pero puede causar problemas de memoria insuficiente con páginas que usan un gran número de superficies de canvas fuera de pantalla. :::hint{type="info"} Esta configuración ha quedado obsoleta. A partir de OS8, la aceleración de Canvas está habilitada de forma predeterminada y puede deshabilitarse configurando este indicador en `falso`. ::: - `javascript_enabled` bool: Habilita JavaScript en el widget. Este valor es `verdadero` de forma predeterminada. - `brightsign_js_objects_enabled` bool: Habilita [Objetos BrightScript-JavaScript](docId\:KcHqxioYMZ9gBNwivrKIV). Este valor es `falso` de forma predeterminada. En OS 8.2.55.4 y versiones posteriores, los widgets HTML que se cargan desde protocolos HTTP/HTTPS no comparten la misma base de datos de almacenamiento local (los widgets HTML que se cargan mediante el protocolo file se comportan como en versiones anteriores). Estos indicadores le permiten cambiar el comportamiento predeterminado de los widgets cargados mediante HTTP/HTTPS de "no compartido" a "compartido", o cambiar el comportamiento predeterminado de los widgets con archivos cargados localmente de "compartido" a "no compartido": - `force_shared_storage` bool: Permite que los widgets HTML cargados mediante el protocolo HTTP/HTTPS compartan almacenamiento local si se cargan desde el mismo dominio. - `force_unshared_storage` bool: Evita que los widgets HTML cargados mediante el protocolo FILE compartan almacenamiento. - `transformar` string: Establece la orientación de pantalla del contenido en el widget (tenga en cuenta que las coordenadas y dimensiones del *roRectangle* que contiene el widget no se ven afectadas por la rotación). Se aceptan los siguientes valores: - `"identidad"`: No hay transformación (es decir, el contenido del widget está orientado horizontalmente). Esta es la configuración predeterminada. - `"rot90"`: El contenido del widget se rota en sentido antihorario a orientación vertical 90 grados. - `"rot180"`: El contenido del widget se rota en sentido antihorario a orientación vertical 180 grados. - `"rot270"`: El contenido del widget se rota en sentido antihorario a orientación vertical 270 grados. - Las siguientes transformaciones adicionales son compatibles desde BOS 9.1.145 y 10.0.15: - `espejo`: Transformación de espejo horizontal - `mirror_rot90`: Rotación reflejada de 90 grados en sentido horario - `mirror_rot180`: Rotación reflejada de 180 grados en sentido horario - `mirror_rot270`: Rotación reflejada de 270 grados en sentido horario - `user_agent` string: Modifica la cadena user-agent predeterminada para la instancia de *roHtmlWidget* . - `url` string: La URL que se utilizará para la visualización. Consulte la entrada de [SetUrl()](docId\:g_TJkqqHLcfT4Fw5_Z6T0) a continuación para obtener más información sobre el uso de URI para acceder a archivos desde el almacenamiento local. - `idioma` string: Especifica el idioma en el que se cargará la página web. - `hoja_de_estilo_del_usuario` string: Aplica la hoja de estilos de usuario especificada a las páginas del widget. El parámetro es un [URI](docId\:g_TJkqqHLcfT4Fw5_Z6T0) que especifica cualquier recurso `archivo:` en el almacenamiento, a menos que esté utilizando una hoja de estilos CSS guardada en la tarjeta SD, en cuyo caso debe usar `sd:/path/filename.css`. La hoja de estilos también puede especificarse como datos en línea. - `hwz_default` string: Especifica el comportamiento predeterminado de [HWZ](docId\:PdYtB1wooQwKYvCD5fJmS) . Este valor está `apagado` de forma predeterminada. Para habilitarlo, establézcalo en `encendido`. - `storage_path` string: Crea una subcarpeta "Local Storage" en el directorio especificado. Esta carpeta es utilizada por aplicaciones de almacenamiento local como la clase JavaScript *almacenamiento* . - `storage_quota` string o double: Establece el tamaño total (en bytes) asignado a todas las aplicaciones de almacenamiento local (incluido IndexedDB). Solo se garantiza que un entero BrightScript pueda representar un conteo de bytes de hasta 2GB, por lo que debe evitar usar enteros al calcular el tamaño: utilice float o double en su lugar, ya que pueden representar valores superiores a 2GB (también se puede usar string, pero no se recomienda). Si la ruta de almacenamiento se especifica sin una cuota de almacenamiento, Chromium reserva de forma predeterminada 1GB más el 10% del tamaño total del dispositivo de almacenamiento. - `puerto` roMessagePort: Configura el puerto de mensajes al que la instancia de *roHtmlWidget* enviará eventos. Al utilizar parámetros de inicialización, se debe usar el parámetro `puerto` en lugar del método `SetPort()` para garantizar que el script pueda capturar los eventos `carga-iniciada`, `carga-finalizada`, y `load-error` . - `fuentes` roArray: Especifica una lista de archivos de fuentes a los que la página web puede acceder. Los archivos de fuentes se especifican como una matriz de nombres de archivo string. Los tipos de fuentes compatibles incluyen archivos TrueType Font (*.ttf*) y archivos Web Open Font (*.woff*). Consulte [esta página](docId\:ONUNa6dIK8p-oa9q_OkkY) para obtener más información sobre las fuentes compatibles. - `pcm_audio_outputs` roArray: Configura la salida de audio PCM para el widget HTML. Las salidas se especifican como una matriz de strings, siendo cada string el nombre de una salida. (Consulte la documentación de [roAudioOutputroAudioOutput](docId:5SPl8VwU8TAcSTV5wbxOK) para obtener una lista de nombres aceptables). - `compressed_audio_outputs` roArray: Configura la salida de audio comprimido (por ejemplo, audio codificado Dolby AC3) para el widget HTML. Las salidas se especifican como una matriz de instancias de *roAudioOutput* . - `salidas_de_audio_multicanal` roArray: Configura la salida de audio multicanal para el widget HTML. Las salidas se especifican como una matriz de instancias de *roAudioOutput* . - `inspector_server` roAssociativeArray: Configura el [Inspector de Chromium](docId\:TkKeDYusWBEjHd0ljmhCS) para el widget. A partir de BrightSign OS 8.5.31 también deberá establecer la clave de registro enable\_web\_inspector (en la sección "html") para habilitar la consola de JavaScript. En “enable\_web\_inspector”, "1" permitirá el inspector y "0" o no presente lo deshabilitará. Será necesario reiniciar para que estos cambios surtan efecto (si habilita/deshabilita esto mediante la interfaz de usuario de LDWS, puede que se active un reinicio para aplicar los cambios). - `ip_addr` string: La dirección IP del Inspector. Este valor es útil si al reproductor se le asigna más de una dirección IP (es decir, hay múltiples interfaces de red) y desea limitar el servidor Inspector a una sola. El valor predeterminado es `"0.0.0.0"`, lo que permite que el Inspector acepte conexiones usando cualquiera de las direcciones IP. - `puerto` int: El puerto para el servidor Inspector. Tenga en cuenta que la versión Beta de BOS 9.1.47 siempre usa el puerto 2999. En la versión oficial 9.1 GA, este parámetro será configurable con ajustes de registro. Establezca la bandera de registro html > enable\_web\_inspector para cambiar el puerto del inspector web del valor predeterminado de 2999. :::hint{type="danger"} Por razones de seguridad, *activar\_inspector\_web* solo debe utilizarse en presentaciones que no sean de producción. Asegúrese de deshabilitar la consola de JavaScript antes de publicar en un entorno de producción. En la versión de Chromium incluida en BOS 8.5.31 y posteriores, la consola de JavaScript registrará información en memoria incluso cuando usted no esté conectado al inspector. Esto consumirá memoria hasta que el reproductor se quede sin ella, lo que provocará un bloqueo. ::: - `security_params` roAssociativeArray: Habilita o deshabilita las comprobaciones de seguridad de Chromium para solicitudes de origen cruzado, reproducción de video local desde HTTP, etc. - `websecurity` bool: Habilita las comprobaciones de seguridad de Chromium para solicitudes de origen cruzado. - `camera_enabled` bool: Habilita el acceso de las páginas web a las cámaras USB conectadas al reproductor (el acceso está deshabilitado de forma predeterminada). Esto permite compatibilidad con aplicaciones WebRTC. - `insecure_https_enabled` bool: Indica al widget que ignore los errores de seguridad al conectarse a hosts HTTPS inseguros (HTTPS inseguro está deshabilitado de forma predeterminada). Habilitar esta función hace que el reproductor sea inseguro; no es adecuada para entornos de producción y solo debe utilizarse para pruebas.] - `audio_capture_enabled` bool: Proporciona acceso a dispositivos de entrada de audio y permite que Chromium enumere todos los dispositivos de entrada y salida de audio - `trusted_iframes_enabled` bool: Controla si el contenido cargado en iframes tiene permitido acceder a Node.js, APIs de JavaScript y objetos BrightSign-JavaScript. - Para habilitar Node en iframes, inicialice `nodejs_enabled` y `security_params.trusted_iframes_enabled` como `verdadero`. - Para habilitar tanto [API de JavaScript](docId\:eX9tdDOFF9LZQCYYwr_4j) como [BrightSign-JavaScript](docId\:KcHqxioYMZ9gBNwivrKIV) en iframes, inicialice `brightsign_js_objects_enabled` y `security_params.trusted_iframes_enabled` como `verdadero`. :::Paragraph{indent="3"} Esta bandera estará disponible para las versiones BOS 9.1.75.3 y posteriores. Si se utiliza en versiones anteriores, provocará un error al cargar el widget HTML. ::: - Con BOS 8.2 y posteriores (Chromium69 y posteriores), se han agregado varias verificaciones nuevas de CORS: `security_params.websecurity` o `enableSecurity(false)` no deshabilitan todas estas verificaciones. Utilice la siguiente configuración de registro en su lugar: `escritura de registro html disable-web-security 1` . Para escribir esto en el registro usando [roRegistrySection](docId\:ZkG2it0MwZHIyUgEuPuIb): ```text RegHtml = CreateObject("roRegistrySection", "html") RegHtml.Write("disable-web-security", "1") RegHtml.Flush() ``` - Esta marca tendrá efecto en todas las instancias de `roHtmlWidget` , a diferencia de las marcas anteriores, que solo son efectivas en la instancia en la que se llaman. :::hint{type="info"} El parámetro `camera_enabled` es compatible actualmente con los modelos XTx44/43, XDx34/33, HDx24/23, LS424/LS423 y 4Kx42. ::: - `javascript_injection` roAssociativeArray: Especifica código JavaScript para inyectar en diferentes puntos de inicialización (el código JavaScript también puede inyectarse durante el tiempo de ejecución mediante el método `InjectJavaScript()`). El array asociativo puede contener tres parámetros (descritos a continuación). Cada valor de parámetro es un array de arrays asociativos, cada uno con un único par clave/valor. El array debe contener una clave `fuente` . El valor de `fuente` es una cadena que puede contener cualquiera de los siguientes elementos: código JavaScript puro, una ruta a un archivo JavaScript o una cadena codificada en base64 (es decir, que comienza con `data:text/javascript;charset=utf-8;base64,` ). Se pueden incluir múltiples claves `fuente` , pero el orden de carga será impredecible. El array también puede contener la clave opcional `mundo` , a la que se le puede asignar uno de los siguientes valores: `"aplicación"`, `"usuario"`, o `"main"` (consulte [esta página](http://doc.qt.io/archives/qt-5.6/qwebenginescript.html#ScriptWorldId-enum) para obtener más detalles); si el parámetro `mundo` no se incluye en el array, `"aplicación"` se selecciona de forma predeterminada. - `creación_de_documentos`: El script se ejecutará tan pronto como se cree el documento. Este comportamiento no es adecuado para ninguna operación DOM. - `document_ready`: El script se ejecutará tan pronto como el DOM esté listo. Este comportamiento es equivalente al disparo del evento `DOMContentLoaded` en JavaScript. - `diferido`: El script se ejecutará cuando finalice la carga de la página. :::hint{type="warning" indent="1"} La ruta a los archivos JavaScript debe ser relativa a la raíz del almacenamiento predeterminado. Los archivos JavaScript deben estar presentes en el sistema de archivos y también pueden ser un recurso en el assetpool. Las URL de datos también son compatibles. ::: ```text config = { javascript_injection: { document_creation: [{source: "0.js" }], document_ready: [{source: "1a.js" }, {source: "1b.js" }], deferred: [{source: "2.js" }] }, url: "..." } ``` - `recursos` roArray: Permite que la instancia de *roHtmlWidget* [acceder a uno o más grupos de recursos](docId\:g_TJkqqHLcfT4Fw5_Z6T0). Si un archivo existe en varios grupos de recursos especificados, el grupo de recursos con el índice más bajo en el array tiene prioridad. Cada entrada del array es un array asociativo que contiene información sobre un grupo de recursos: - `piscina` roAssetPool: Un grupo de recursos que contiene archivos - `colección` roAssetCollection: Un manifiesto que identifica los archivos en el grupo - `uri_prefix` string: El prefijo URI de los recursos de la página web que se recuperarán del grupo - `pool_prefix` string: El prefijo del grupo que reemplazará el prefijo URI al buscar el recurso en el grupo - `datos_del_usuario` object: Establece los datos de usuario que se devolverán cuando se generen eventos. Esto está disponible a partir de la versión 9.1.84 de BOS y posteriores. ## ifHtmlWidget ### GetFailureReason() As String Proporciona más información cuando una función miembro devuelve `falso`. ### Hide() As Boolean Oculta el widget. ### Show() As Boolean Muestra el widget. ### raise() Eleva el widget html por encima de todos los demás elementos gráficos en pantalla (incluidos otros widgets html). ### lower() Coloca el widget html por debajo de todos los elementos gráficos en pantalla. ### SetRectangle(r As roRectangle) As Boolean Cambia el tamaño y la posición del rectángulo del widget utilizando el objeto *roRectangle*. ### SetURL(URL As String) As Boolean  Muestra contenido desde la URL especificada. Cuando utilice este método para recuperar contenido desde almacenamiento local, especifique la ubicación del archivo de la siguiente manera: `"file:/://"`. Por ejemplo, un archivo *index.html* en la carpeta "Content" de la tarjeta SD se puede seleccionar con la cadena  `"file:/SD:/Content/index.html"`. También puede omitir la especificación de la unidad para seleccionar la unidad activa actualmente (es decir, cualquier unidad desde la que se haya cargado el autorun actual). ### AddAuthenticationCredentials (url As String, username As String, password As String) As Boolean Indica a Chromium que utilice el nombre de usuario y la contraseña especificados al recuperar la URL dada. ### MapFilesFromAssetPool(asset\_pool As roAssetPool, asset\_collection As roAssetCollection, pool\_prefix As String, uri\_prefix As String) As Boolean  Establece la asignación entre el espacio URL y los archivos del pool. El contenido HTML que se ha implementado mediante BrightAuthor normalmente residirá en el pool y tendrá nombres de archivo cifrados basados en SHA1. Se requiere un mecanismo de asignación para permitir que cualquier URI relativa contenida en el contenido HTML siga funcionando y para localizar los recursos apropiados en sus respectivas ubicaciones del pool. Puede utilizar este método para vincular parte del espacio URI de recursos a ubicaciones del pool. Este método acepta los siguientes argumentos: un objeto *roAssetPool* que contiene recursos, un objeto *roAssetCollection* que identifica los recursos y dos cadenas semi-arbitrarias (URI\_PREFIX y POOL\_PREFIX). Cualquier URI con la forma `"file:/[URI_PREFIX][RESOURCE_ID]"` se reescribirá con la forma `"[POOL_PREFIX][RESOURCE_ID]"`. Luego se ubicará en el pool como si ese nombre se hubiera pasado al método *roAssetPoolFiles.GetPoolFilePath()* . Esta vinculación ocurre para cada instancia de *roHtmlWidget*, por lo que se pueden utilizar distintas asignaciones para diferentes paquetes de contenido. ### SetZoomLevel(scale\_factor as Float) As Boolean Ajusta el factor de escala para la página mostrada (el valor predeterminado es 1.0). ### EnablePinchToZoom(enable as Boolean) As Boolean Habilita o deshabilita la funcionalidad de zoom mediante pellizco, que está deshabilitada de forma predeterminada. ### EnableSecurity(enable As Dynamic) As Boolean  Obsoleto. Utilice `security_params` en los parámetros de inicialización en su lugar. ### EnableMouseEvents(enable As Boolean) As Boolean Obsoleto. Utilice `mouse_enabled` en los parámetros de inicialización en su lugar. ### SetPortrait(portrait\_mode As Boolean) As Boolean Obsoleto. Utilice `transformar` en los parámetros de inicialización en su lugar. ### SetTransform(transform As String) As Boolean Establece la orientación de pantalla del contenido en el widget (tenga en cuenta que las coordenadas y dimensiones del *roRectangle* que contiene el widget no se ven afectadas por la rotación). Este método acepta las siguientes cadenas: - `"identidad"`: No hay transformación (es decir, el contenido del widget está orientado horizontalmente). Esta es la configuración predeterminada. - `"rot90"`: El contenido del widget se rota a orientación vertical a 90 grados (en sentido horario). - `"rot270"`: El contenido del widget se rota a orientación vertical a 270 grados (en sentido antihorario). Las siguientes transformaciones adicionales son compatibles a partir de BOS 9.1.145 y 10.0.15: - `espejo`: Transformación de espejo horizontal - `mirror_rot90`: Rotación reflejada de 90 grados en sentido horario - `mirror_rot180`: Rotación reflejada de 180 grados en sentido horario - `mirror_rot270`: Rotación reflejada de 270 grados en sentido horario :::hint{type="info"} El evento de JavaScript `cargar` informará dimensiones horizontales para una ventana que se rota con el método `SetPortrait()` o `SetTransform()`. Si su aplicación depende del evento `cargar` para recuperar las dimensiones de la ventana, recomendamos usar en su lugar el parámetro de inicialización `transformar`, lo que garantiza que la ventana HTML se inicialice con dimensiones verticales. ::: ### SetAlpha(alpha As Integer) As Boolean Establece el nivel alfa general para el widget (el valor predeterminado es 255). ### EnableScrollbars(scrollbars As Boolean) As Boolean Obsoleto. Use `scrollbar_enabled` en los parámetros de inicialización en su lugar. ### AddFont(filename As String) As Boolean Obsoleto. Use `fuentes` en los parámetros de inicialización en su lugar. ### SetPcmAudioOutputs(outputs As roArray) As Boolean Obsoleto. Use `pcm_audio_outputs` en los parámetros de inicialización en su lugar. ### SetCompressedAudioOutputs(outputs As roArray) As Boolean Obsoleto. Use `compressed_audio_outputs` en los parámetros de inicialización en su lugar. ### SetMultichannelAudioOutputs(outputs As roArray) As Boolean Obsoleto. Use `salidas_de_audio_multicanal` en los parámetros de inicialización en su lugar.  ### SetHWZDefault(default As String) As Void  Obsoleto. Use `hwz_default` en los parámetros de inicialización en su lugar. ### SetVideoPlayerDefaults(defaults As roAssociativeArray) As Boolean Establece la configuración de reproducción predeterminada para los elementos `