UIHTML

创建HTML UI组件

页面上倒塌

语法

h = uihtml
h = uihtml(父)
h = uihtml（＿＿＿、名称、值)

描述

h = uihtml在新图形中创建HTML UI组件，并返回超文本标记语言UI组件对象。MATLAB®打电话给Uifigure.函数创建图形。

与之UIHTML函数，您可以嵌入HTML, JavaScript®或者应用程序中的CSS内容和与第三方库的接口，以显示窗口小部件或数据可视化等内容。所有支持万博1manbetx文件（包括HTML，JavaScript，CSS，图像）必须保存在本地文件系统可以访问的位置。

例子

h = uihtml（父）在指定的父容器中创建HTML UI组件。父结点可以是数字对象创建的Uifigure.函数或其子容器之一。

例子

h = uihtml（＿＿＿，名称，价值）使用一个或多个名称-值对参数指定HTML UI组件属性。例如,“HTMLSource”、“timepicker.html”将HTML源设置为指定的HTML文件。

例子

全部收缩

打开直播脚本

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

无花果= uifigure (“位置”，[561 497 333 239]);h = uihtml(图);h.HTMLSource ='
  <跨度样式=“颜色：红色;”> hello  世界！ '；

打开直播脚本

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

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

无花果= uifigure;fig.Position = [500 500 380 445];h = uihtml(图);h.头寸= [10 10 360 420];

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

<！doctype html>   
播放音频文件： <音频控制style =“padding-left：20px”>  您的浏览器不支持音频标记。万博1manbetx 
播放视频文件： <视频宽度=“320”高度=“240”控制样式=“填充 - 左：20px”> <源src=“./ xylophone_video.mp4”type =“视频/ mp4”> 您的浏览器不支持视频标记。万博1manbetx

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

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

打开直播脚本

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

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

无花果= uifigure;Fig.Position = [500 500 490 180];h = uihtml(图);H.Position = [20 20 450 130];

然后，创建一个名为HTML文件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 !”；

打开直播脚本

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

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

无花果= uifigure;Fig.Position = [500 500 490 180];h = uihtml(图);H.Position = [20 20 450 130];

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

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

  • 写一个设置功能内部<脚本>标记来连接JavaScript对象，调用htmlComponent，在MATLAB中创建的HTML UI组件。

  • 添加一个事件侦听器设置函数。事件监听器监听“点击”事件，并创建监听器回调函数。当单击事件发生时，侦听器回调函数将数据财产的htmlComponentJavaScript对象到随机生成的整数之间1和100.．

<！DOCTYPE html>

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

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

输入参数

全部收缩

父容器，指定为数字使用Uifigure.函数或其子容器之一:选项卡，控制板，ButtonGroup,或网格布局．如果没有指定父容器，则MATLAB调用Uifigure.函数创建一个新的数字用作父容器的对象。

名称值对参数

指定可选的逗号分隔的对名称，价值参数。的名字参数名和价值是相应的价值。的名字必须出现在引号内。您可以以任何顺序指定多个名称和值对参数Name1, Value1,…,的家．

例子:h = uihtml (uifigure HTMLSource, C: \ \ expenses.html工作);

请注意

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

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

当嵌入HTML标记时，不需要指定< html >要么身体< >标签。所创建的MATLAB图形所使用的Chromium浏览器支持万博1manbetx您指定的标记Uifigure.函数，然后它将渲染。如果您的代码需要更多的结构，那么可以考虑使用HTML文件。

如果你设置htmlsource.属性设置为HTML文件的路径，则HTML文件必须位于本地文件系统可以访问的位置。如果您正在使用支持文件，如Java万博1manbetxScript、CSS、库或图像，那么将这些文件放在本地文件系统可以访问的位置，在HTML文件中引用它们，并设置htmlsource.属性设置为HTML文件的路径。万博1manbetx支持文件不能位于HTML文件相邻或以上的相对目录中。

例子:h = uihtml(“HTMLSource”、“CustomCharts.html”)指定HTML文件。

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

这是red text.

')指定标记。

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

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

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

  • 当数据属性在MATLAB中设置，则数据财产的htmlComponentJavaScript对象还更新和触发JavaScript事件侦听器“DataChanged”事件。

  • 当htmlcomponent.data.data.是在javascript中设置的数据MATLAB中HTML UI组件的属性还更新并触发dataChangedfcn.打回来。

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

参考jsonencode.函数以获取有关其支持的数据类型的更多信息。万博1manbetx如果jsonencode.函数不支持您的数据类型，则使用数据类万博1manbetx型转换函数，如num2str.，以将数据转换为受支持的类型。万博1manbetx然后，将其设置为数据财产。

有关如何编写支持数据同步的HTML文件和属性的详细信息htmlComponentJavaScript对象，见创建可以触发或响应数据变化的HTML文件．

数据更改时回调，指定为其中一个值：

  • 函数处理。

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

  • 字符矢量包含有效的matlab表达式（不推荐）。MATLAB在基础工作区中评估此表达式。

当值的值数据财产发生变化htmlComponentJavaScript对象，数据更新MATLAB HTML UI组件的属性，并执行此回调。

这个回调函数可以访问关于JavaScript对象中数据变化的特定信息。MATLAB在a中传递信息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资源或嵌入应用程序从外部网页使用UIHTML函数。

  • 的HTML文件htmlsource.属性无法通过内容交付网络(CDN)访问第三方JavaScript库。将库保存在本地文件系统可以访问的位置。

  • 常用的web文件类型，如JavaScript和CSS，可以从指定的HTML文件中引用htmlsource.属性，但可能不支持其他web文件类型。万博1manbetx

  • 内容无法溢出HTML UI组件的界限。如果您正在创建动态内容，如弹出窗口小部件，则会使HTML UI组件的大小足够大，以在弹出窗口处于打开状态时显示小部件。

  • 在MATLAB桌面，某些HTML特性，如web插件和访问网络摄像头或麦克风是不支持的。万博1manbetx

  • 不能设置htmlsource.属性添加到文件名后附加查询参数的HTML文件中。作为一个变通方法，将这些参数设置为htmlcomponent.data.data.．

  • 超链接的matlab:不支持操作。万博1manbetx

更多关于

全部收缩

潜在的安全风险

请注意

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

与第三方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 =＇＇；drawnow() h.HTMLSource = oldValue;

  • MATLAB图形创建与Uifigure.函数使用Chromium浏览器，运行HTML5。新的Chromium版本经常发布，并且在不同的操作系统之间可能有所不同。有关受支持的特性和功能，请咨询外部Chromium资源。万博1manbetx如果你打算分享你的应用或者在不同的环境中使用它，就要考虑这个因素。

  • 检查外部资源，比如https://caniuse.com/，用于不同桌面和web浏览器支持的特性类型。万博1manbetx

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

另请参阅

功能

属性

主题

介绍了R2019b

MATLAB的文档

万博1manbetx

介绍基于MATLAB的深度学习

介绍基于MATLAB的深度学习

下载电子书