主要内容

uihtml

创建HTML UI组件

全部折叠到页面中

句法

H = UIHTML
h = uihtml(父)
h = uihtml (___，名称，价值）

描述

H = UIHTML在新图形中创建HTML UI组件，并返回HTML.UI组件对象。马铃薯®调用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组件并在其中显示格式化文本。

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

打开生活的脚本

创建一个HTML文件，以嵌入音频和视频元素在您的应用程序和参考媒体源文件。

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

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

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

<！DOCTYPE html>   
播放音频文件:

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

h.htmlsource = fullfile（pwd，'audio_videoplayers.html')；

打开生活的脚本

创建一个HTMLComponent.JavaScript®对象，显示在Matlab®中的HTML UI组件上设置的数据。

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

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

然后，创建一个名为displaydatafrommatlab.html.。在这个文件中,

  • 用一个风格标记要为此定义内部CSS样式

    显示文本的元素。

  • 写一个设置函数内的<脚本>标记要连接您的JavaScript对象，请调用HTMLComponent.，转换为在MATLAB中创建的HTML UI组件。

  • 控件中添加事件侦听器设置函数。活动侦听器侦听“DataChanged”活动活动HTMLComponent.对象，并创建一个侦听器回调函数。当一个“DataChanged”事件发生时，侦听器回调函数更新“datadisplay”

    元素的值数据Matlab的财产。

<！doctype html>

现在，在matlab中，设置价值HTMLSource属性到HTML文件的路径。创建一个DataChangedFcn回调函数显示JavaScript代码生成的随机编号。点击生成随机数控件的值数据属性显示在MATLAB命令窗口。

h.htmlsource = fullfile（pwd，“generateJSRandomNumber.html”)；h.datachangedfcn = @（src，事件）disp（h.data）;

输入参数

全部折叠

父容器，指定为a数字使用的对象uifigure功能，或其中一个子容器：标签那面板那buttongroup.,或GridLayout。如果没有指定父容器，MATLAB将调用uifigure创建新的功能数字作为父容器的对象。

名称-值对的观点

指定可选的逗号分离对名称,值论点。的名字是参数名称和价值是对应的值。的名字必须出现在引号内。您可以按如下顺序指定几个名称和值对参数name1，value1，...，namen，valuen。

例子：h = uihtml（Uifigure，'htmlsource'，'c：\ work \ chemenses.html'）;

笔记

此处列出的属性仅是一个子集。有关完整列表，请参阅HTML属性。

HTML标记或文件，指定为包含HTML标记或HTML文件路径的字符向量或字符串标量。所有HTML标记和文件都必须良好形成。如果指定的字符向量或字符串标量结束. html，然后假设它是HTML文件的路径。

嵌入HTML标记时，您无需指定或标签。如果您指定的标记在Chromium浏览器中使用MATLAB金宝app创建的数字uifigure函数，然后它将呈现。如果您需要更多的代码结构，那么可以考虑使用HTML文件。

如果你设置HTMLSource属性到HTML文件的路径，HTML文件必须位于本地文件系统可以访问的位置。如果您使用的是支持文件，例如Jav金宝appaScript，CSS，库或图像，则将文件放在本地文件系统可以访问的位置，在HTML文件中引用它们，并设置HTMLSource属性到HTML文件的路径。金宝app支持文件不能在HTML文件中邻近或高于HTML文件的相对目录中。

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

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

This is red text.

')指定的标记。

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

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

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

  • 当。。。的时候数据属性位于Matlab中，是数据财产的财产HTMLComponent.对象的JavaScript事件监听器也会更新和触发'dataChanged'事件。

  • 什么时候htmlComponent。数据在JavaScript中设置数据属性也会更新和触发DataChangedFcn回调。

如果您具有像嵌套单元格阵列，结构阵列或MATLAB表阵列数据一样，您可能需要更多关于数据如何在MATLAB和JavaScript之间转换的更多信息。当。。。的时候数据HTML UI组件的属性在MATLAB中设置，数据将使用该数据使用jsonencode函数，与JavaScript同步，使用解析JSON.parse ()，最后设置为数据财产的财产HTMLComponent.JavaScript对象。转换在相反的方向上也发生了JSON.stringify ()和JSondecode.函数。这数据属性是唯一与JavaScript同步的属性。

指的是jsonencode有关它支持的数据类型的更多信息。金宝app如果是jsonencode函数不支持您的数据类型，请使用数据类金宝app型转换函数，如num2str，将数据转换为支持的类型。金宝app然后，将其设置为值数据财产。

有关如何编写支持数据同步的HTML文件和属性的详细信息HTMLComponent.JavaScript对象,看创建可以触发或响应数据更改的HTML文件。

当数据改变时的回调，指定为以下值之一:

  • 功能手柄。

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

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

当值数据物业的变动HTMLComponent.JavaScript对象,数据更新MATLAB HTML UI组件的属性，并执行这个回调。

此回调函数可以访问有关JavaScript对象中数据更改的特定信息。Matlab通过了一个信息dataChangeddata.对象作为回调函数的第二个参数。在App Designer中，调用该参数事件。您可以查询dataChangeddata.使用点表示法的对象属性。例如，event.previousdata.的前一个值数据在最后一次更新或更改之前。这dataChangeddata.指定为字符向量的回调函数不可用对象。

此表列出了属性dataChangeddata.对象。

财产 描述
数据 最近的最新数据是由最后一个造成的dataCanged.事件
以前的数据 最后一个数据dataCanged.事件
来源

MATLAB执行回调的HTML UI组件
EventName 'dataChanged'

有关写回调的更多信息，请参阅在App Designer中写回调。

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

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

这位置值相对于可拉伸区域父容器。可拉伸区域是容器边界内的区域，并且不包括装饰品（例如菜单栏或标题）所占用的区域。

所有测量均以像素为单位。

限制

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

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

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

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

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

  • 你不能设置HTMLSource属性到HTML文件，该文件具有附加到其文件名附加的查询参数。作为解决方法，请设置这些参数htmlComponent。数据。

  • 超链接MATLAB：不支持操作。金宝app

更多关于

全部折叠

潜在的安全风险

笔记

这个列表并不全面。在与第三方库进行接口时，请参考外部资源了解其他风险和安全考虑。

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

  • Matlab功能如求解功能可以增加注入攻击的风险。作为对策，在MATLAB中使用非信任输入之前先验证它。

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

  • 使用MATLAB访问操作系统的应用程序系统那dos,或unix功能可能很容易被代码注入。

有关如何将部署的Web应用程序降低潜在风险的信息，请参阅创作安全网络应用程序（Matlab编译器）。

尖端

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

  • 如果您想刷新值的值HTMLSource属性的原始值，使用此解决方案保存HTMLSource变量，重置HTMLSource为空值并更新图以清除其内容，最后设置HTMLSource回到原来的值。

    oldvalue = h.htmlsource;h.htmlsource ='';rawing（）h.htmlsource = oldvalue;

  • 用MATLAB创建的数字uifigure功能使用Chromium浏览器并运行HTML5。新的铬版本经常被释放，可以在操作系统之间变化。请咨询外部铬资源，以获得支持的功能和功能。金宝app如果您计划分享您的应用程序或在不同的环境中使用它，请考虑此因素。

  • 检查外部资源，如https://caniuse.com/，对于跨不同桌面和Web浏览器支持的功能的类型。金宝app

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

也可以看看

职能

属性

话题

在R2019B中介绍

MATLAB文件

金宝app

与Matlab引入深度学习

与Matlab引入深度学习

下载电子书