主要内容

uihtml

创建HTML UI组件

所有的页面崩溃

语法

h = uihtml
h = uihtml(父)
h = uihtml (___、名称、值)

描述

h = uihtml创建一个HTML UI组件在一个新的图并返回HTMLUI组件对象。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标记和显示格式化的文本。

无花果= uifigure (“位置”,(561 497 333 239));h = uihtml(图);h。HTMLSource =' < p风格= "字体类型:arial;" > < b > <跨风格=“颜色:红色;你好< / span > <你> < / u > ! < / b > < / p > ";

打开生活的脚本

创建一个HTML文件中嵌入音频和视频元素应用程序源文件和参考资料。

首先,创建一个空HTML UI组件图。

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

然后,创建一个HTML文件audio_videoplayers.html。在这个文件中,添加音频和视频元素和指定的文件来源相对于HTML文件的路径。在这个例子中,媒体文件在同一目录中为HTML文件。

一个良好的实践是为每个元素指定多个文件来源,因为并不是所有的上下文相同的文件类型的支持。金宝app例如,在视频元素,指定简称OGA文件作为应用程序的第一个视频来玩。然后,指定MP4文件作为后备,如果第一个文件不支持。金宝app

< !DOCTYPE html > < html > <身体风格= " background:白色,字体类型:arial;" > < p风格= " padding-left: 20 px”>播放音频文件:< / p > <音频控件风格= " padding-left: 20 px " > < src = " . / handel_audio来源。wav音频/ wav“type = > < src = " . / handel_audio来源。简称oga音频/ ogg“type = >你的浏览器不支持音频标签。金宝app< /音频> < p风格= " padding-left: 20 px " >播放视频文件:< / p > <视频宽度= =“240”“320”高度控制风格=“padding-left: 20 px”> < src = " . / xylophone_video来源。简称oga " type = "视频/ ogg src = " " > <来源。/ xylophone_video。mp4视频/ mp4“type = >标记您的浏览器不支持视频。金宝app< /视频> < /身体> < / html >

现在,嵌入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。位置= (20 450 130);

然后,创建一个HTML文件displayDataFromMATLAB.html。在这个文件中,

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

  • 写一个设置内部函数<脚本>标签来连接你的JavaScript对象,调用htmlComponent,在MATLAB中创建的HTML UI组件。

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

< !DOCTYPE html > < html > <头> <时尚> #提示{字体类型:无衬线;text-align:中心;border - radius: 5 px;background - color: lightblue;填充:20 px;}# dataDisplay {border - radius: 5 px;高度:10 vh;填充:12 px 20 px;}< /风格> <脚本type = " text / javascript " > (htmlComponent) {htmlComponent功能设置。addEventListener (“DataChanged函数(事件){. getelementbyid (“dataDisplay”)。innerHTML = htmlComponent.Data; }); }    
  

 
 Please set data in MATLAB...

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

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

设置的值数据属性的HTML UI组件。注意,htmlComponentJavaScript对象更新在你的HTML UI组件。

h。Data =“Hello World !”;

打开生活的脚本

创建一个htmlComponentJavaScript®对象生成一个随机数,当一个按钮被单击时,并在MATLAB®显示数量。

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

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

然后,创建一个HTML文件generateJSRandomNumber.html。在这个文件中,

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

  • 写一个设置内部函数<脚本>标签来连接你的JavaScript对象,调用htmlComponent,在MATLAB中创建的HTML UI组件。

  • 中添加一个事件监听器设置函数。事件监听器监听“点击”按钮,创建一个事件侦听器回调函数。当一个单击事件发生时,侦听器回调函数设置数据财产的htmlComponentJavaScript对象之间的一个随机生成的整数1和One hundred.。

< !DOCTYPE html > < html > <头> <时尚>按钮{宽度:100%;字体类型:无衬线;background - color: # 4 caf50;颜色:白色;字体大小:1快速眼动;文本阴影:1 px 1 px 1 px # 000;填充:5 px 20 px;保证金:8 px 0;边界:没有; border-radius: 10px; line-height: 2.5; cursor: pointer; background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0)); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6); } button:hover { background-color: #45a049; } button:focus { outline: 0; } button:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6), inset 2px 2px 3px rgba(0, 0, 0, .6); }

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

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

输入参数

全部折叠

指定为一个父容器图对象创建使用uifigure函数,或者它的一个孩子容器:选项卡,面板,ButtonGroup,或GridLayout。如果你不指定一个父容器,MATLAB调用uifigure创建一个新的函数图对象作为父容器。

名称-值参数

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

R2021a之前,用逗号来分隔每一个名称和值,并附上的名字在报价。

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

请注意

这里列出的属性是唯一的一个子集。一个完整的列表,请参阅HTML属性。

HTML标记或文件,指定为一个特征向量或字符串标量包含HTML标记或一个HTML文件的路径。所有的HTML标记和文件必须是格式良好的。如果指定的特征向量或字符串标量结尾. html,那么它被认为是一个HTML文件的路径。

当嵌入HTML标记时,您不需要指定< html >或<身体>标签。是否支持您所指定的标记在铬浏览器使用MATLAB数据创建金宝appuifigure函数,那么它将呈现。如果你需要更多的代码结构,那么考虑使用一个HTML文件。

如果你设置HTMLSource属性的路径一个HTML文件,HTML文件必须位于一个本地文件系统可以访问的地方。如果您使用支持文件,如JavaSc金宝appript、CSS,图书馆,或图片,然后把您的本地文件系统的文件位置可以访问,引用它们在一个HTML文件,并设置HTMLSource属性的HTML文件的路径。您的组件金宝app代码使用的任何支持文件必须包含HTML文件在文件夹您指定的HTMLSource财产或文件夹的子文件夹。有关更多信息,请参见限制。

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

例子:h = uihtml (HTMLSource, < p >这是<跨风格=“颜色:红”>红< / span >文本。< / p > ")指定的标记。

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

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

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

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

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

如果你有数据像嵌套细胞数组,数组的结构,或MATLAB表数组数据,您可能需要更多的信息关于MATLAB和JavaScript之间的数据转换。当数据属性的HTML UI组件设置在MATLAB中,数据被转换使用jsonencode解析函数,与JavaScript,同步使用JSON.parse (),最后设置为数据财产的htmlComponentJavaScript对象。转换发生在相反的方向的JSON.stringify ()和jsondecode函数。的数据属性是唯一的财产,同步使用JavaScript。

指的是jsonencode函数的更多信息关于它所支持的数据类型。金宝app如果jsonencode函数不支持您的数据类型,然后使用一个金宝app数据类型转换函数,等等num2str您的数据转换为一个受支持的类型。金宝app然后,设置它的值数据财产。

关于如何编写一个HTML文件的更多信息,使数据同步的属性htmlComponentJavaScript对象,看创建HTML文件,可以触发或响应数据变化。

回调数据更改时,指定这些值之一:

  • 函数处理。

  • 细胞数组中第一个元素是一个函数处理。后续单元阵列中的元素传递给回调函数的参数。

  • 特征向量包含一个有效的MATLAB表达式(不推荐)。MATLAB计算表达式的基本工作空间。

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

这个回调函数可以访问特定的信息变化数据的JavaScript对象。MATLAB传递信息DataChangedData回调函数对象作为第二个参数。在应用程序设计,论证事件。你可以查询DataChangedData对象属性使用点符号。例如,event.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属性不能访问第三方JavaScript库的内容分发网络(CDN)。图书馆保存在一个位置,你可以访问本地文件系统。

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

  • 您的组件金宝app代码使用的任何支持文件必须包含HTML文件在文件夹您指定的HTMLSource财产或文件夹的子文件夹。

  • 内容的范围不能溢出HTML UI组件。如果要创建动态内容,如弹出窗口小部件,使HTML UI组件的大小足以显示小部件弹出时处于打开状态。

  • 在MATLAB桌面,特定的HTML特性,比如web插件和不支持访问摄像头或麦克风。金宝app

  • 你不能设置HTMLSource房地产一个HTML文件,查询参数附加到它的文件名。作为一个解决方案,设置这些参数htmlComponent.Data。

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

  • 用户界面图等回调WindowButtonDownFcn和WindowKeyPressFcn不执行一个HTML UI组件图的焦点。

更多关于

全部折叠

潜在的安全风险

请注意

这个列表并不全面。咨询外部资源的额外风险和与第三方库时的安全性考虑。

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

  • MATLAB的特性,如eval函数可以增加注入攻击的风险。作为对策,在MATLAB在使用前验证不可信的输入。

  • 任何MATLAB函数处理代码输入(XML、JSON、SQL等)可能是脆弱的代码注入。

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

如何减少信息的潜在风险部署web应用程序,看看编写安全Web应用程序(MATLAB编译器)。

提示

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

  • 如果你想刷新的价值HTMLSource属性,使用这个方法来保存的原始值HTMLSource一个变量,重置HTMLSource空值和更新图明确其内容,最后集HTMLSource回到原来的值。

    oldValue = h.HTMLSource;h。HTMLSource =”;drawnow h。HTML源= oldValue;

  • MATLAB数据创建uifigure函数使用Chromium浏览器和运行HTML5。新版本发布频繁和铬操作系统之间的差异。咨询外部铬资源支持的特性和功能。金宝app考虑这个因素如果你想分享你的应用程序或在不同的环境中使用它。

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

  • MathWorks®不促进任何第三方库。

版本历史

介绍了R2019b

另请参阅

功能

属性

主题