创建可以触发或响应数据更改的HTML文件
您可以通过在显示HTML，JavaScript中的HTML UI组件中包含应用程序中的第三方可视化或小部件®，或来自HTML文件的CSS内容。在将HTML UI组件添加到应用程序时，使组件设置数据或响应MATLAB之间的数据更改®和JavaScript，包括设置函数。在设置功能您可以将HTML内容连接到MATLAB中的HTML UI组件。
在HTML文件中包含设置函数
要将应用程序中的MATLAB HTML UI组件连接到HTML文件中的内容，创建一个设置函数定义并初始化本地HTMLComponent.JavaScript对象。Matlab中的HTML UI组件和HTMLComponent.JavaScript对象有数据相互同步的属性。的设置如果您想从MATLAB或JavaScript设置数据，并对相反方向发生的数据变化作出响应，则需要使用此函数。
的设置当其中一个事件发生时调用函数：
在图中创建HTML UI组件，内容已完全加载。
的
htmlsource.属性更改为新值。
的设置函数只有在定义了它时才被调用。的HTMLComponent.对象只能从设置函数。
的HTMLComponent.JavaScript对象也有addeventlistener.和RemoveeventListener.属性。使用这些属性进行监听DataChanged来自matlab的事件。事件数据来自DataChanged事件提供源头HTMLComponent.JavaScript对象的新旧数据。有关的更多信息addeventlistener.和RemoveeventListener.方法,请参阅EventTarget.AddeventListener（）和EventTarget.removeEventListener ()在Mozilla.®MDN Web Docs。
示例HTML文件
这个例子显示了一个HTML文件设置函数，使MATLAB和JavaScript响应彼此之间的数据变化。
在设置功能，一旦HTMLComponent.初始化JavaScript对象，您定义了组件的行为。例如：
得到的初始值
数据来自MATLAB的HTML UI组件的属性。通过更新DOM元素或JavaScript小部件来初始化HTML或JavaScript。
聆听
“dataChanged”MATLAB的事件和代码A JavaScript响应。例如，您可以使用触发事件的新数据更新您的HTML或JavaScript。创建一个设置的函数
数据财产的财产HTMLComponent.对象并触发DataChangedFcnMatlab中的回调。
后设置功能，您可以使用第三方JavaScript库作为库文档建议。
这是一个示例HTML文件，sampleHTMLFile.html．
<！DOCTYPE html>The data from MATLAB will display here:
调试HTML文件
如果您创建的HTML组件没有按照预期工作，或者如果您想知道在MATLAB和JavaScript之间完成转换后的数据是什么样子，请在系统浏览器中打开HTML文件。使用您的浏览器开发人员工具(DevTools)，您可以设置断点来测试您的设置函数。当您通过系统浏览器调试HTML文件时，必须模拟MATLAB和JavaScript之间的连接设置功能提供。
模拟从MATLAB发送数据到JavaScript
此示例显示如何模拟MATLAB向JavaScript发送数据的方式，以便您可以调试HTML文件。
在MATLAB中打开这个例子。从当前文件夹浏览器，右键单击文件调用sampleHTMLFile.html并选择外开放的MATLAB．HTML文件在您的系统浏览器中打开。
在MATLAB中，运行此代码将字符向量的MATLAB单元数组转换为JSON字符串。将返回的字符串值复制到剪贴板。
值= {'一'；“两个”；'三'};jsontxt = jsonencode（值）jsontxt = '(“1”,“2”,“3”)”
在系统浏览器的DevTools中，打开文件以查看代码。在线创建断点
16， 在哪里dom.textContent = initialData;．打开devtools控制台并创建
HTMLComponent.JavaScript对象。使用JSON.parse方法将刚才在MATLAB中生成的JSON字符串转换为JavaScript对象，并将其存储在数据财产的财产HTMLComponent.目的。var htmlComponent = {Data: JSON.parse('["one"，"two"，"three"]')， // JSON格式的文本来自MATLAB数据addEventListener: function() {console.log("addEventListener called with: "， arguments)}};当仍然在DevTools控制台中时，调用
设置函数。当您恢复执行时设置函数，数据显示在DevTools中的HTML页面中。设置(htmlComponent)
你也可以模拟“dataChanged”监听器回调JSON编码和解析数据从MATLAB到JavaScript代码。
模拟从JavaScript发送到Matlab的数据
如果您想调试数据是如何从JavaScript发送到MATLAB的，请使用json.stringify.方法将JavaScript对象转换为json格式的字符串。然后，在MATLAB中使用JSondecode.将该字符串转换为MATLAB数据的函数。
另请参阅
功能
属性
相关话题
您还可以从以下列表中选择一个网站：
