主要内容

uihtml

创建HTML UI组件

自从R2019b

折叠所有页面

语法

H = uihtml
H = uihtml(parent)
H = uihtml(＿＿＿、名称、值)

描述

H = uihtml在新图形中创建HTML UI组件并返回超文本标记语言UI组件对象。MATLAB®调用uifigure函数创建图形。

与uihtml函数，可以嵌入HTML, JavaScript®或CSS内容，并与第三方库交互以显示小部件或数据可视化等内容。所有支持金宝app文件(包括HTML、JavaScript、CSS、图像)必须保存在本地文件系统可以访问的位置。

例子

H = uihtml(父）在指定的父容器中创建HTML UI组件。父节点可以是数字对象创建。uifigure函数或其子容器之一。

例子

H = uihtml(＿＿＿，名称,值）使用一个或多个名称-值参数指定HTML UI组件属性。例如,uihtml("Position"，[230 60 40 150])创建一个具有指定位置和大小的HTML UI组件。将此选项用于前面语法中的任何输入参数组合。

例子

全部折叠

打开实时脚本

创建一个HTML组件，并使用HTML标记在其中显示格式化文本。

图= ufigure图(“位置”，[561 497 333 239]);H = uihtml(fig);h.HTMLSource =' < p风格= "字体类型:arial;" > < b > < span风格=“颜色:红色;>你好< / span > <你> < / u > !< / b > < / p > ";

打开实时脚本

创建一个HTML文件，在应用程序中嵌入音频和视频元素，并引用媒体源文件。

首先，在图中创建一个空的HTML UI组件。

FIG = ufigure;fig.Position = [500 500 380 445];H = uihtml(fig);h.Position = [10 10 360 420];

然后，创建一个名为audio_videoplayers.html．在文件中，添加音频和视频元素，并相对于HTML文件的路径指定它们的文件源。在本例中，媒体文件与HTML文件位于同一目录中。

一个好的做法是为每个元素指定多个文件源，因为不是所有上下文都支持相同的文件类型。金宝app例如，MATLAB Desktop中的HTML组件不支持MP4视金宝app频，但MATLAB Online™支持。在video元素中，指定一个OGA文件作为应用程序尝试播放的第一个视频。然后，如果第一个文件不受支持，则指定一个MP4文件作为备用文件。金宝app

< !DOCTYPE html>   
播放音频文件:
  
播放视频文件:
 <视频width="320" height="240" controls style="padding-left:20px">  浏览器不支持video标签。金宝app

属性将HTML文件嵌入到应用程序中HTMLSource属性设置为文件的完整路径。

h.HTMLSource = fullfile(pwd，“audio_videoplayers.html”);

打开实时脚本

创建一个htmlComponentJavaScript®对象，显示在MATLAB®HTML UI组件上设置的数据。

首先，创建一个空的HTML UI组件，并将其放置在图形中。

FIG = ufigure;fig.Position = [500 500 490 180];H = uihtml(fig);h.Position = [20 20 450 130];

然后，创建一个名为displayDataFromMATLAB.html．在文件中，

  • 使用一个风格标记来定义内部CSS样式< div >显示文本的元素。

  • 写一个设置函数的内部< >脚本标记来连接JavaScript对象，称为htmlComponent到您在MATLAB中创建的HTML UI组件。

  • 类中添加事件侦听器设置函数。事件监听器监听“DataChanged”上的事件htmlComponentJavaScript对象，并创建一个侦听器回调函数。当一个“DataChanged”事件发生时，监听器回调函数更新“dataDisplay”< div >元素属性的值数据属性的MATLAB。

< !DOCTYPE html>       
  

 
 Please set data in MATLAB...

现在，在MATLAB中，设置HTMLSource属性设置为HTML文件的路径。

h.HTMLSource = fullfile(pwd，“displayDataFromMATLAB.html”);

的值数据属性为HTML UI组件。注意htmlComponent在HTML UI组件中更新JavaScript对象。

h.Data =“Hello World !”;

创建JavaScripthtmlComponent对象，该对象显示一个按钮和一个进度条，并在进度发生变化时在MATLAB命令窗口中显示当前进度。

首先，创建一个空的HTML UI组件，并将其放置在图形中。

图= ufigure图(“位置”，[500 500 350 150]);H = uihtml(图，“位置”，[50 40 250 70]);

然后，创建一个名为progressBar.html．在文件中:

  • 使用一个<时尚>标记来定义按钮和进度条元素的内部CSS样式。

  • 写一个设置函数的内部< >脚本标记来连接JavaScript对象，命名为htmlComponent到您在MATLAB中创建的HTML UI组件。

  • 类中添加事件侦听器设置函数。事件监听器监听“点击”事件，并创建侦听器回调函数。当用户单击下一个按钮，则监听器回调函数将更新进度条并设置数据的属性htmlComponent到新的进度值。

< !DOCTYPE html>

的值在MATLAB中设置HTMLSource属性设置为HTML文件的路径。创建一个DataChangedFcn方法时显示已更新进度的回调函数数据属性变更。

h.HTMLSource =“progressBar.html”;h.DataChangedFcn = @(src,event)disp(event. data);

HTML UI组件。该组件在进度条上方包含一个文本“Next”按钮。

单击下一个按钮以更新进度条并更改数据财产。进度显示在MATLAB命令窗口中。

自从R2023a

创建JavaScripthtmlComponent对象，该对象在用户单击按钮时生成一个随机数，并在MATLAB中显示该数字。

首先，创建一个名为myRandomNum.m．在脚本中，创建一个空的HTML UI组件，并将其放置在图形中。

图= ufigure图(“位置”，[100 100 300 160]);H = uihtml(图，“位置”，[50 50 200 60]);

然后，创建一个名为generateJSRandomNumber.html．在文件中:

  • 使用一个<时尚>标签定义按钮元素的内部CSS样式。

  • 写一个设置函数的内部< >脚本标记来连接JavaScript对象，命名为htmlComponent到您在MATLAB中创建的HTML UI组件。

  • 类中添加事件侦听器设置监听“点击”按钮上的事件。当用户单击按钮时，首先生成一个随机数，然后发送一个事件通知MATLAB进行单击。传入随机数作为事件数据，以便您可以在MATLAB中访问该数字。

< !DOCTYPE html>

在MATLAB中myRandomNum.m的值HTMLSource属性设置为HTML文件的路径。创建一个HTMLEventReceivedFcn回调函数，在命令窗口中显示生成的随机数。

h.HTMLSource =“generateJSRandomNumber.html”;h.HTMLEventReceivedFcn = @displayNumber;函数displayNumber(src,event) name = event. htmleventname;如果比较字符串(名称、“ButtonClicked”) number = event.HTMLEventData;disp(数量);结束结束

运行脚本，点击按钮，生成随机数并显示在MATLAB命令窗口中。

带有蓝色边框和文本“生成随机数”的按钮

自从R2023a

创建JavaScripthtmlComponent对象，当用户与MATLAB旋钮组件交互时更新HTML元素样式。

首先，创建一个名为myTemperature.m．在脚本中，在UI图中创建一个旋钮UI组件和一个空的HTML UI组件。

FIG = ufigure;K = uiknob(fig，“离散”，…“项目”, (“冻结”，“冷”，“温暖”，“热”]，…“ItemsData”，[0 1 2 3]，…“价值”, 0);H = uihtml(图，“位置”，[230 60 40 150]);

然后，创建一个名为thermometer.html．在文件中:

  • 使用一个<时尚>标签定义温度计部件的内部CSS样式。

  • 写一个设置函数的内部< >脚本标记来连接JavaScript对象，命名为htmlComponent到您在MATLAB中创建的HTML UI组件。

  • 类中添加事件侦听器设置函数，监听事件从MATLAB命名“TemperatureChanged”．当htmlComponent对象收到温度发生变化的通知时，查询事件数据以获得新的温度。然后，调整温度计上的样式以反映新的温度。

< !DOCTYPE html>

在MATLAB中，在脚本中，编写与HTML源代码通信的代码:

  • 的值HTMLSource属性的HTML UI组件到HTML文件的路径。

  • 写一个ValueChangedFcn用于发送事件的旋钮的回调函数“TemperatureChanged”当温度变化时，HTML源代码。将新的温度值作为事件数据传递。

h.HTMLSource =“thermometer.html”;k.ValueChangedFcn = @(src,event) handleKnobValueChanged(src,event,h);函数handleKnobValueChanged(src,event,h) val = src. value;sendEventToHTMLSource (h,“TemperatureChanged”, val);结束

运行脚本并与旋钮交互以更新温度计。

旋钮指向“温暖”和相应的温度计

打开实时脚本

创建一个HTML UI组件，用于显示具有多个字段的数据。

创建一个商品卡组件，其中列出商品名称、价格和数量。设计HTML UI组件以接收项目数据结构体在MATLAB。首先，检查如何结构体当数据从MATLAB传输到JavaScript时，数据被编码jsonencode函数。

matlabData = struct(“ItemName”，“苹果”，“价格”2,“数量”10);jsonencode (matlabData)
ans = '{“ItemName”:“苹果”、“价格”:2,“数量”:10}”

有关HTML组件如何在MATLAB和JavaScript之间传输数据的详细信息，请参见在应用中创建HTML内容．

接下来，创建一个名为itemCard.html创建条目卡HTML组件并设置其样式。在文件中:

  • 使用一个<时尚>标签来定义项目卡的内部CSS样式。

  • 写一个设置函数的内部< >脚本标记来检测数据属性的MATLAB HTML UI组件对象的变化，然后访问数据JavaScript的属性htmlComponent对象。数据被编码为具有多个属性的JavaScript对象。访问这些属性以更新HTML组件的内容。

  • 使用一个身体< >标记来创建主要的HTML文档内容。

< !DOCTYPE html>       
 
 
 Item 
 
 Price:  
 
 Quantity:

在UI图中创建HTML组件。指定itemCard.html作为HTML源和一个项目数据结构体作为组件数据。

itemData = struct(“ItemName”，“苹果”，“价格”2,“数量”10);FIG = ufigure;C = uihtml(图，“HTMLSource”，“itemCard.html”，“数据”itemData);

带有标题“Apple”和项目“价格:2”和“数量:10”的HTML组件项目卡

输入参数

全部折叠

父容器，指定为数字对象创建。uifigure函数或它的子容器之一:选项卡，面板，ButtonGroup,或GridLayout．如果没有指定父容器，MATLAB将调用uifigure函数创建一个新的数字对象，该对象用作父容器。

名称-值参数

指定可选参数对为Name1 = Value1,…,以=家,在那里名字参数名称和价值对应的值。名称-值参数必须出现在其他参数之后，但对的顺序无关紧要。

例子:h = uihtml(ufigure,HTMLSource="C:\Work\expense .html");

在R2021a之前，使用逗号分隔每个名称和值，并将其括起来名字在报价。

例子:h = uihtml(ufigure，"HTMLSource"，"C:\Work\expenses.html");

请注意

这里列出的属性只是一个子集。有关完整列表，请参见HTML属性．

HTML标记或文件，指定为包含HTML标记或HTML文件路径的字符向量或字符串标量。所有HTML标记和文件必须格式良好。如果指定的字符向量或字符串标量以. html，则假定它是HTML文件的路径。

在嵌入HTML标记时，不需要指定< html >或身体< >标签。控件创建的MATLAB图形所使用的Chromium浏览器中金宝app是否支持指定的标记uifigure函数，然后它将呈现。如果您的代码需要更多的结构，那么可以考虑使用HTML文件。

如果你设置HTMLSource属性设置为HTML文件的路径，则HTML文件必须位于本地文件系统可以访问的位置。如果使用支持文件，如JavaScr金宝appipt、CSS、库或图像，则将这些文件放在本地文件系统可以访问的位置，在HTML文件中引用它们，并设置HTMLSource属性设置为HTML文件的路径。组件代码金宝app使用的任何支持文件都必须位于包含为HTMLSource属性或该文件夹的子文件夹中。有关更多信息，请参见限制．

例子:h = uihtml('HTMLSource'，'CustomCharts.html')指定HTML文件。

例子:h = uihtml('HTMLSource'，'

This is red text.

')指定的标记。

MATLAB数据，指定为任何MATLAB数据类型。的值时使用此参数HTMLSource是定义JavaScript对象的HTML文件的路径。然后，可以在MATLAB HTML UI组件和JavaScript对象之间同步这些数据。

同步数据属性之间的MATLAB和第三方内容嵌入到你的应用程序，创建一个设置函数，该函数连接JavaScript对象htmlComponent到MATLAB中的HTML UI组件。然后，设置HTMLSource属性值设置为文件的路径。

的值的变化数据属性仅在一个方向上触发回调事件。具体地说,

  • 当数据属性是在MATLAB中设置的数据的属性htmlComponent对象的JavaScript事件监听器也会更新和触发“DataChanged”事件。

  • 当htmlComponent。数据在JavaScript中设置，则数据属性的HTML UI组件在MATLAB中也更新和触发DataChangedFcn回调。

如果您拥有嵌套单元格数组、结构数组或MATLAB表数组数据等数据，您可能需要更多关于如何在MATLAB和JavaScript之间转换数据的信息。当数据属性的HTML UI组件在MATLAB中设置，数据转换使用jsonencode函数，与JavaScript同步，解析使用JSON.parse ()，最后设置为数据的属性htmlComponentJavaScript对象。转换发生在相反的方向，以及通过的方式JSON.stringify ()和jsondecode函数。的数据property是唯一与JavaScript同步的属性。

请参阅jsonencode函数获取有关其支持的数据类型的更多信息。金宝app如果jsonencode函数不支持您的数据类型，则使用数据类金宝app型转换函数，如num2str，将数据转换为受支持的类型。金宝app然后，将其设置为数据财产。

属性的属性，以获取有关如何编写启用数据同步的HTML文件的详细信息htmlComponentJavaScript对象，请参见在应用中创建HTML内容．

回调函数，指定为以下值之一:

  • 函数处理。

  • 单元格数组，其中第一个元素是函数句柄。单元格数组中的后续元素是传递给回调函数的参数。

  • 包含有效MATLAB表达式的字符向量(不推荐)。MATLAB在基本工作空间中计算这个表达式。

时的值数据属性的更改。htmlComponentJavaScript对象，数据属性的MATLAB HTML UI组件被更新，这个回调执行。

这个回调函数可以访问JavaScript对象中数据更改的特定信息。MATLAB在a中传递信息DataChangedData对象作为回调函数的第二个参数。在App Designer中，这个参数被调用事件．您可以查询DataChangedData使用点表示法的对象属性。例如,事件。PreviousData的前一个值数据在最后一次更新或更改之前。的DataChangedData对象对于指定为字符向量的回调函数不可用。

属性的属性DataChangedData对象。

财产 描述
数据 最近的数据来自于最后的DataChanged事件
PreviousData 最后一次数据DataChanged事件
源

执行回调的MATLAB HTML UI组件
EventName “DataChanged”

有关编写回调函数的详细信息，请参见应用程序设计器中的回调．

自从R2023a

回调函数，当从HTML源接收到事件时，指定为以下值之一:

  • 函数处理。

  • 单元格数组，其中第一个元素是函数句柄。单元格数组中的后续元素是传递给回调函数的参数。

  • 包含有效MATLAB表达式的字符串标量或字符向量(不推荐)。MATLAB在基本工作空间中计算这个表达式。

函数将事件从JavaScript发送到MATLAB时执行此回调sendEventToMATLABJavaScript上的函数htmlComponent对象。使用此回调编写MATLAB代码以响应用户交互或HTML组件中的更改，例如单击按钮HTML元素。有关更多信息，请参见在应用中创建HTML内容．

这个回调函数可以访问JavaScript对象发送的事件的特定信息。MATLAB将信息传递到HTMLEventReceivedData对象作为回调函数的第二个参数。在App Designer中，这个参数被调用事件．查询HTMLEventReceivedData使用点表示法的对象属性。例如,事件。超文本标记语言EventName返回由JavaScript对象指定的事件名称。的HTMLEventReceivedData对象对于指定为字符串标量或字符向量的回调函数不可用。

属性的属性HTMLEventReceivedData对象。

财产 描述
HTMLEventName 属性指定的事件名称sendEventToMATLAB函数在JavaScript代码中调用
HTMLEventData 属性指定的事件数据sendEventToMATLAB函数在JavaScript代码中调用
源

执行回调的MATLAB HTML UI组件
EventName “HTMLEventReceived”

有关编写回调函数的详细信息，请参见为以编程方式创建的应用程序创建回调．

HTML UI组件相对于父容器的位置和大小，指定为表单的四个元素向量[左下宽高]．该表描述了向量中的每个元素。

元素 描述
左 从父容器的内左边缘到HTML UI组件的外左边缘的距离
底 从父容器的内底边到HTML UI组件的外底边的距离
宽度 HTML UI组件的左右外边缘之间的距离
高度 HTML UI组件顶部和底部外边缘之间的距离

的位置值相对于可拉的区域父容器的。可绘制区域是容器边界内的区域，不包括菜单栏或标题等装饰所占用的区域。

所有的测量都以像素为单位。

限制

  • 属性不能从外部网页链接到URL web资源或嵌入应用程序uihtml函数。

  • 属性指定的HTML文件HTMLSource属性不能通过内容分发网络(CDN)访问第三方JavaScript库。将库保存在本地文件系统可以访问的位置。

  • 的HTML文件中可以引用常见的web文件类型，如JavaScript和CSSHTMLSource属性，但可能不支持其他web文件类型。金宝app

  • 组件代码金宝app使用的任何支持文件都必须位于包含为HTMLSource属性或该文件夹的子文件夹中。

  • 内容不能超出HTML UI组件的边界。如果您正在创建动态内容，比如弹出窗口小部件，请使HTML UI组件的大小足够大，以便在弹出窗口处于打开状态时显示小部件。

  • 在MATLAB桌面，某些HTML功能，如web插件和访问网络摄像头或麦克风，是不支持的。金宝app

  • 您不能设置HTMLSource属性添加到一个HTML文件，该文件的文件名附加了查询参数。作为一种变通方法，请设置这些参数htmlComponent。数据．

  • 超链接的matlab:不支持操作。金宝app

  • UI图回调，例如WindowButtonDownFcn和WindowKeyPressFcn当图中的HTML UI组件有焦点时，不执行。

更多关于

全部折叠

潜在的安全风险

请注意

这个列表并不是全面的。在与第三方库交互时，请咨询外部资源以了解额外的风险和安全注意事项。

与第三方JavaScript库交互的应用程序可能容易受到攻击数据或代码注入攻击。

  • MATLAB特性，比如eval功能会增加注射攻击的风险。作为对策，在MATLAB中使用不可信输入之前验证它。

  • 任何处理类似代码的输入(XML、JSON、SQL等)的MATLAB函数都可能容易受到代码注入的攻击。

  • 使用MATLAB访问操作系统的应用程序系统，dos,或unix函数可能容易受到代码注入的攻击。

有关如何降低部署web应用程序的潜在风险的信息，请参见编写安全的Web应用程序(MATLAB编译器)．

提示

  • 如果你要创建一个HTML文件嵌入到你的应用程序中，首先要验证静态HTML在浏览器中是否正确呈现。有关更多信息，请参见在应用中创建HTML内容．

  • 的值HTMLSource属性的原始值，使用此变通方法保存HTMLSource到一个变量，重置HTMLSource为空值并更新图形以清除其内容，最后设置HTMLSource回到它原来的价值。

    oldValue = h.HTMLSource;h.HTMLSource =＇＇;htmlsource = oldValue;

  • 使用uihtml若要显示支持文件(如图像或视频)中的内容，请将该金宝app文件放在本地文件系统可以访问的位置，在包含本地内容的HTML文件中引用它，然后设置HTMLSource属性添加到HTML文件。

  • 用MATLAB创建的图形uifigure函数使用Chromium浏览器，运行HTML5。新的Chromium版本经常发布，并且在不同的操作系统之间可能有所不同。咨询外部Chromium资源以获得受支持的特性和功能。金宝app如果你打算在不同的环境中共享你的应用或使用它，请考虑这个因素。

  • 检查外部资源，比如https://caniuse.com/，以了解跨不同桌面和网页浏览器支持的功能类型。金宝app

  • MathWorks®不推广任何第三方库。

版本历史

R2019b引入

全部展开

另请参阅

功能

属性

主题