主要内容

uihtml

创建HTML UI组件

在页面中全部折叠

语法

H = uihtml
H = uihtml(父类)
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组件属性。例如,“HTMLSource”、“timepicker.html”将HTML源设置为指定的HTML文件。

例子

全部折叠

打开实时脚本

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

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

打开实时脚本

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

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

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

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

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

<！DOCTYPE html>  播放音频文件:
 <音频控件style="padding-left:20px">  您的浏览器不支持audio标签。金宝app播放视频文件:
 <视频宽度="320"高度="240"控制样式="padding-left:20px">  您的浏览器不支持video标签。金宝app

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

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

打开实时脚本

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

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

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

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

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

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

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

<！DOCTYPE html>       
  

 
 Please set data in MATLAB...

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

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

的值数据属性的HTML UI组件。注意如何htmlComponentHTML UI组件中的JavaScript对象更新。

h.Data =“Hello World !”；

打开实时脚本

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

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

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

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

  • 使用一个风格标签来定义按钮元素的内部CSS样式。

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

  • 对象中添加事件侦听器设置函数。事件监听器监听“点击”事件，并创建侦听器回调函数。当发生单击事件时，侦听器回调函数设置数据的属性htmlComponent对象之间的随机生成整数1而且One hundred.．

<！DOCTYPE html>

现在，在MATLAB中，设置HTMLSource属性设置为HTML文件的路径。创建一个DataChangedFcn回调函数，它显示JavaScript代码生成的随机数。单击生成随机数按钮查看的值数据属性显示在MATLAB命令窗口。

h.HTMLSource = fullfile(pwd，“generateJSRandomNumber.html”）;h.DataChangedFcn = @(src,event)disp(h.Data);

输入参数

全部折叠

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

名称-值参数

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

在R2021a之前，名称和值之间用逗号隔开，并括起来的名字在报价。

例子:h = uihtml(uifigure，'HTMLSource'，'C:\Work\ expenhes .html');

请注意

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

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

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

如果你设置HTMLSource属性设置为HTML文件的路径，则HTML文件必须位于本地文件系统可以访问的位置。如果正在使用支持文件，如JavaS金宝appcript、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和第三方内容，你嵌入到你的应用程序，创建一个设置函数，该函数连接一个名为htmlComponent到MATLAB中的HTML UI组件。然后，设置HTMLSource属性值设置为文件路径。

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

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

  • 当htmlComponent。数据在JavaScript中设置数据属性也会更新并触发DataChangedFcn回调。

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

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

类的属性以及如何编写启用数据同步的HTML文件的详细信息htmlComponentJavaScript对象，参见创建可以触发或响应数据更改的HTML文件．

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

  • 函数处理。

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

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

的值时数据属性的更改。htmlComponentJavaScript对象，数据属性会被更新，并执行此回调。

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

属性的属性DataChangedData对象。

财产 描述
数据 最新的数据来自上一次DataChanged事件
PreviousData 上一次之前的数据DataChanged事件
源

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

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

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

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

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

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

限制

  • 控件无法链接到URL web资源或从外部web页面嵌入应用程序uihtml函数。

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

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

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

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

  • 在MATLAB桌面，某些HTML功能，如网页插件和访问网络摄像头或麦克风不支持。金宝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;

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

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

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

版本历史

在R2019b中引入

另请参阅

功能

属性

主题