Main Content

本页的翻译已过时。点击此处可查看最新英文版本。

uihtml

创建 HTML UI 组件

说明

h = uihtml 在新图窗中创建一个 HTML UI 组件,并返回 HTML UI 组件对象。MATLAB® 调用 uifigure 函数来创建图窗。

通过 uihtml 函数,您可以在 App 中嵌入 HTML、JavaScript® 或 CSS 内容,并与第三方库对接,以显示小组件或数据可视化等内容。所有支持文件(包括 HTML、JavaScript、CSS、图像)必须保存在本地文件系统可以访问的位置。

示例

h = uihtml(parent) 在指定的父容器中创建 HTML UI 组件。父容器可以是使用 uifigure 函数创建的 Figure 对象或其子容器之一。

示例

h = uihtml(___,Name,Value) 使用一个或多个名称-值对组参数指定 HTML UI 组件属性。例如,'HTMLSource','timepicker.html' 将 HTML 源设置为指定的 HTML 文件。

示例

全部折叠

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

fig = uifigure('Position',[561 497 333 239]);
h = uihtml(fig);
h.HTMLSource = '<p style="font-family:arial;"><b><span style="color:red;">Hello</span> <u>World</u>!</b></p>';

创建一个 HTML 文件,以在您的 App 中嵌入音频和视频元素并引用媒体源文件。

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

fig = uifigure;
fig.Position = [500 500 380 445];

h = uihtml(fig);
h.Position = [10 10 360 420];

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

<!DOCTYPE html>
<html>
	<body style="background-color:white;font-family:arial;">
		<p style="padding-left:20px">
		Play audio file:
		</p>
		
		<audio controls style="padding-left:20px">
			<source src="./handel_audio.wav" type="audio/wav">
			<source src="./handel_audio.oga" type="audio/ogg">
			Your browser does not support the audio tag.
		</audio>
		
		<p style="padding-left:20px">
		Play video file:
		</p>
		
		<video width="320" height="240" controls style="padding-left:20px">
			<source src="./xylophone_video.mp4" type="video/mp4">
			<source src="./xylophone_video.oga" type="video/ogg">
			Your browser does not support the video tag.
		</video>
		
	</body>
</html>

现在,通过将 HTMLSource 属性设置为文件的完整路径,将 HTML 文件嵌入到您的 App 中。

h.HTMLSource = fullfile(pwd,'audio_videoplayers.html');

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

首先,创建一个空的 HTML UI 组件,并将其置于图窗中的某位置。

fig = uifigure;
fig.Position = [500 500 490 180];

h = uihtml(fig);
h.Position = [20 20 450 130];

然后,创建一个名为 displayDataFromMATLAB.html 的 HTML 文件。在该文件中,

  • 使用 style 标签为显示文本的 <div> 元素定义内部 CSS 样式。

  • <script> 标签内编写一个 setup 函数,将您的 JavaScript 对象(称为 htmlComponent)连接到您在 MATLAB 中创建的 HTML UI 组件。

  • setup 函数中添加一个事件侦听程序。事件侦听程序侦听 htmlComponent JavaScript 对象上的 "DataChanged" 事件,并创建一个侦听程序回调函数。当 "DataChanged" 事件发生时,侦听程序回调函数会用在 MATLAB 中为 Data 属性设置的值更新 "dataDisplay" <div> element

<!DOCTYPE html>
<html>
<head>
<style>
#prompt {
  font-family: sans-serif;
  text-align:center;
  border-radius: 5px;
  background-color: lightblue;
  padding: 20px;
}

#dataDisplay {
  border-radius: 5px;
  height: 10vh;
  padding: 12px 20px;
}
</style>

<script type="text/javascript">
         
        function setup(htmlComponent) {
		          
            htmlComponent.addEventListener("DataChanged", function(event) {
            document.getElementById("dataDisplay").innerHTML = htmlComponent.Data;
            });     
        }
</script>
</head>

<body>
     <div id="prompt">
		
	<span><label for="prompt"><strong>Data from MATLAB will display here:</strong></label></span>
	<br/><br/>
	<div id ="dataDisplay">
	Please set data in MATLAB...
	</div>
		
     </div>
</body>

</html>

现在,在 MATLAB 中,将 HTMLSource 属性的值设置为指向该 HTML 文件的路径。

h.HTMLSource = fullfile(pwd,'displayDataFromMATLAB.html');

为 HTML UI 组件的 Data 属性设置值。请注意 htmlComponent JavaScript 对象如何在您的 HTML UI 组件中更新。

h.Data = "Hello World!";

创建一个 htmlComponent JavaScript® 对象,该对象会在您点击按钮时生成一个随机数并在 MATLAB® 中显示该数字。

首先,创建一个空的 HTML UI 组件,并将其置于图窗中的某位置。

fig = uifigure;
fig.Position = [500 500 490 180];

h = uihtml(fig);
h.Position = [20 20 450 130];

然后,创建一个名为 generateJSRandomNumber.html 的 HTML 文件。在该文件中,

  • 使用 style 标签为按钮元素定义内部 CSS 样式。

  • <script> 标签内编写一个 setup 函数,将您的 JavaScript 对象(称为 htmlComponent)连接到您在 MATLAB 中创建的 HTML UI 组件。

  • setup 函数中添加一个事件侦听程序。事件侦听程序侦听按钮上的 "click" 事件,并创建一个侦听程序回调函数。当点击事件发生时,侦听程序回调函数将 htmlComponent JavaScript 对象的 Data 属性设置为一个随机生成的在 1100 之间的整数。

<!DOCTYPE html>
<html>
<head>
<style>
button {
  width: 100%;
  font-family: sans-serif;
  background-color: #4CAF50;
  color: white;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #000;
  padding: 5px 20px;
  margin: 8px 0;
  border: none;
  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);
}
</style>

   <script type="text/javascript">
         
      function setup(htmlComponent) {
                      
         document.getElementById("generateRandomNumber").addEventListener("click", function(event) {
            htmlComponent.Data = Math.floor(Math.random() * 100) + 1;
         });
      }
   </script>
</head>

   <body>
     <button id="generateRandomNumber">Generate Random Number</button><br/> 
   </body>
	
</html>

现在,在 MATLAB 中,将 HTMLSource 属性的值设置为指向该 HTML 文件的路径。创建一个 DataChangedFcn 回调函数,显示您的 JavaScript 代码生成的随机数。点击生成随机数按钮,在 MATLAB 命令行窗口中查看 Data 属性显示的值。

h.HTMLSource = fullfile(pwd,'generateJSRandomNumber.html');
h.DataChangedFcn = @(src,event)disp(h.Data);

输入参数

全部折叠

父容器,指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一:TabPanelButtonGroupGridLayout。如果不指定父容器,MATLAB 会调用 uifigure 函数创建新 Figure 对象充当父容器。

名称-值对组参数

指定可选的、以逗号分隔的 Name,Value 对组参数。Name 为参数名称,Value 为对应的值。Name 必须放在引号中。您可采用任意顺序指定多个名称-值对组参数,如 Name1,Value1,...,NameN,ValueN 所示。

示例: h = uihtml(uifigure,'HTMLSource','C:\Work\expenses.html');

注意

此处所列的属性只是一部分。有关完整列表,请参阅 HTML 属性

HTML 标记或文件,指定为字符向量或字符串标量,包含 HTML 标记或 HTML 文件的路径。所有 HTML 标记和文件必须采用正确格式。如果指定的字符向量或字符串标量以 .html 结尾,则它假定为 HTML 文件的路径。

在嵌入 HTML 标记时,您不需要指定 <html><body> 标签。如果使用 uifigure 函数创建的 MATLAB 图窗所使用的 Chromium 浏览器支持您指定的标记,则它将会呈现。如果您的代码需要更多结构,则可以考虑改用 HTML 文件。

如果将 HTMLSource 属性设置为 HTML 文件的路径,该文件必须位于本地文件系统可以访问的位置。如果您正在使用支持文件,如 JavaScript、CSS、库或图像,请将这些文件放在本地文件系统可以访问的位置,在 HTML 文件中引用它们,并将 HTMLSource 属性设置为该 HTML 文件的路径。支持文件不能位于与 HTML 文件相邻或更上层的相对目录中。

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

示例: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') 指定标记。

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

要在 MATLAB 和您正在 App 中嵌入的第三方内容之间同步 Data 属性的值,请在一个 HTML 文件中创建一个 setup 函数,它将名为 htmlComponent 的 JavaScript 对象连接到 MATLAB 中的 HTML UI 组件。然后,将 HTMLSource 属性值设置为该文件的路径。

Data 属性值的更改只会单向触发回调事件。具体而言,

  • 当在 MATLAB 中设置 Data 属性时,htmlComponent JavaScript 对象的 Data 属性也会更新并触发 'DataChanged' 事件的 JavaScript 事件侦听程序。

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

如果您有嵌套元胞数组、结构体数组或 MATLAB 表数组数据等数据,您可能需要有关数据如何在 MATLAB 和 JavaScript 之间转换的更多信息。当在 MATLAB 中设置 HTML UI 组件的 Data 属性时,数据将使用 jsonencode 函数进行转换,与 JavaScript 同步,使用 JSON.parse() 进行解析,最后设置为 htmlComponent JavaScript 对象的 Data 属性。通过 JSON.stringify()jsondecode 函数,也可以进行反向转换。Data 属性是唯一与 JavaScript 同步的属性。

有关它支持的数据类型的详细信息,请参考 jsonencode 函数。如果 jsonencode 函数不支持您的数据类型,请使用数据类型转换函数(如 num2str)将您的数据转换为支持的类型。然后,将其设置为 Data 属性的值。

有关如何编写支持数据同步的 HTML 文件以及 htmlComponent JavaScript 对象的属性的详细信息,请参阅Create HTML File That Can Trigger or Respond to Data Changes

在数据更改时执行的回调,指定为下列值之一:

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

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

htmlComponent JavaScript 对象中的 Data 属性的值发生变化时,将更新 MATLAB HTML UI 组件的 Data 属性,并执行此回调。

此回调函数可以访问关于 JavaScript 对象中数据更改的特定信息。MATLAB 将 DataChangedData 对象中的信息作为第二个参数传递给回调函数。在 App 设计工具中,该参数名为 event。您可以使用圆点表示法查询 DataChangedData 对象属性。例如,event.PreviousData 返回上次更新或更改前 Data 的先前值。DataChangedData 对象不可用于指定为字符向量的回调函数。

下表列出了 DataChangedData 对象的属性。

属性说明
Data上次 DataChanged 事件产生的最新数据
PreviousData上次 DataChanged 事件前的数据
Source

执行回调的 MATLAB HTML UI 组件

EventName'DataChanged'

有关编写回调的详细信息,请参阅在 App 设计工具中编写回调

HTML UI 组件相对于父容器的位置和大小,指定为 [left bottom width height] 形式的四元素向量。此表介绍该向量中的每个元素。

元素说明
left父容器的内部左边缘与 HTML UI 组件的外部左边缘之间的距离
bottom父容器的内部下边缘与 HTML UI 组件的外部下边缘之间的距离
widthHTML UI 组件的左右外部边缘之间的距离
heightHTML UI 组件的上下外部边缘之间的距离

Position 值相对于父容器的可绘制区域。可绘制区域是指容器边框内的区域,不包括装饰元素(如菜单栏或标题)所占的区域。

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

局限性

  • 您无法使用 uihtml 函数从外部网页链接到 URL Web 资源或嵌入应用程序。

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

  • 常见的 Web 文件类型,如 JavaScript 和 CSS,可以从您为 HTMLSource 属性指定的 HTML 文件中引用,但可能不支持其他 Web 文件类型。

  • 内容不能溢出 HTML UI 组件的边界。如果您正在创建动态内容,如弹出式小组件,请将您的 HTML UI 组件的大小设置得足够大,以便在弹窗打开时可以显示小组件。

  • MATLAB 桌面版不支持某些 HTML 功能不受支持,例如 Web 插件以及访问网络摄像头或麦克风。

  • 您不能将 HTMLSource 属性设置为后跟查询参数的 HTML 文件名。作为解决办法,请在 htmlComponent.Data 中设置这些参数。

  • 不支持带有 matlab: 操作的超链接。

详细信息

全部折叠

潜在的安全风险

注意

此列表并不全面。与第三方库对接时,请咨询外部资源,了解其他风险和安全注意事项。

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

  • eval 函数这样的 MATLAB 功能会增加注入攻击的风险。作为对策,请先对不受信任的输入进行验证,然后在 MATLAB 中使用它。

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

  • 使用 MATLAB systemdosunix 函数访问操作系统的应用程序可能容易遭受代码注入的攻击。

有关如何降低预部署 Web App 的潜在风险的信息,请参阅Authoring Secure Web Apps (MATLAB Compiler)

提示

  • 如果您正在创建嵌入到 App 中的 HTML 文件,请首先验证静态 HTML 是否在浏览器中正确呈现。有关详细信息,请参阅Create HTML File That Can Trigger or Respond to Data Changes

  • 如果您要刷新 HTMLSource 属性的值,请使用此解决方法将 HTMLSource 的原始值保存为变量,将 HTMLSource 重置为空值,并更新图窗以清空其内容,最后将 HTMLSource 设置回原始值。

    oldValue = h.HTMLSource;
    h.HTMLSource = '';
    drawnow()
    h.HTMLSource = oldValue;

  • uifigure 函数创建的 MATLAB 图窗使用 Chromium 浏览器并运行 HTML5。新的 Chromium 版本经常发布,并且可能因操作系统而异。有关支持的特性和功能,请咨询外部 Chromium 资源。如果您计划共享您的 App 或在不同环境中使用它,请考虑此因素。

  • 检查外部资源,如 https://caniuse.com/,以获取在不同的桌面和 Web 浏览器上支持的功能类型。

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

在 R2019b 中推出