目录摘要1. 引言 - JavaScript 执行的价值1.1 JS 执行应用场景1.2 eval 功能概览1.3 执行方式2. 基本执行操作2.1 执行简单脚本2.2 获取页面信息2.3 执行多行脚本3. 数据获取3.1 获取元素内容3.2 获取表单数据3.3 获取所有输入值3.4 获取计算样式4. DOM 操作4.1 修改元素内容4.2 修改元素HTML4.3 添加元素4.4 删除元素4.5 修改属性5. 样式控制5.1 修改内联样式5.2 添加/删除类5.3 主题切换6. 事件处理6.1 触发点击6.2 触发表单提交6.3 触发自定义事件7. 实战案例一动态数据更新7.1 场景描述7.2 实现代码7.3 更新图表8. 实战案例二表单自动填充8.1 场景描述8.2 实现代码9. 实战案例三内容提取9.1 场景描述9.2 实现代码10. 高级技巧10.1 异步操作10.2 等待元素10.3 批量操作11. 安全注意事项11.1 安全风险11.2 安全实践12. 总结12.1 核心要点12.2 最佳实践12.3 下一步参考资料摘要本文深入探讨 OpenClaw Canvas 的 JavaScript 执行功能。从基本执行、数据获取、DOM操作到高级应用全面解析如何通过 eval 注入 JavaScript 实现灵活的界面控制。通过实际案例演示数据提取、动态更新、事件处理等场景帮助开发者掌握 Canvas 的高级控制能力。⚡1. 引言 - JavaScript 执行的价值1.1 JS 执行应用场景场景说明示例数据获取获取页面数据读取表单值DOM操作修改页面元素更新内容事件触发触发页面事件点击按钮动态更新实时更新内容刷新数据样式控制动态修改样式切换主题1.2 eval 功能概览eval 执行执行类型数据读取DOM修改事件触发样式控制返回结果1.3 执行方式方式说明返回值同步执行立即执行并返回有异步执行异步执行Promise2. 基本执行操作2.1 执行简单脚本resultcanvas(actioneval,javaScript1 1)# result 22.2 获取页面信息# 获取标题titlecanvas(actioneval,javaScriptdocument.title)# 获取URLurlcanvas(actioneval,javaScriptwindow.location.href)# 获取HTMLhtmlcanvas(actioneval,javaScriptdocument.documentElement.outerHTML)2.3 执行多行脚本resultcanvas(actioneval,javaScript const title document.title; const url window.location.href; JSON.stringify({ title, url }); )3. 数据获取3.1 获取元素内容defget_element_text(selector):获取元素文本returncanvas(actioneval,javaScriptf document.querySelector({selector}).textContent )# 使用示例textget_element_text(#main-title)3.2 获取表单数据defget_form_data(form_selector):获取表单数据returncanvas(actioneval,javaScriptf const form document.querySelector({form_selector}); const formData new FormData(form); const data {{}}; for (let [key, value] of formData.entries()) {{ data[key] value; }} JSON.stringify(data); )3.3 获取所有输入值defget_all_inputs():获取所有输入框的值returncanvas(actioneval,javaScript const inputs document.querySelectorAll(input, textarea, select); const data {}; inputs.forEach(input { const name input.name || input.id; if (name) { data[name] input.value; } }); JSON.stringify(data); )3.4 获取计算样式defget_computed_style(selector,property):获取计算样式returncanvas(actioneval,javaScriptf const element document.querySelector({selector}); window.getComputedStyle(element).getPropertyValue({property}); )4. DOM 操作4.1 修改元素内容defset_element_text(selector,text):设置元素文本canvas(actioneval,javaScriptf document.querySelector({selector}).textContent {text}; )4.2 修改元素HTMLdefset_element_html(selector,html):设置元素HTMLcanvas(actioneval,javaScriptf document.querySelector({selector}).innerHTML {html}; )4.3 添加元素defappend_element(parent_selector,html):添加子元素canvas(actioneval,javaScriptf const parent document.querySelector({parent_selector}); const div document.createElement(div); div.innerHTML {html}; parent.appendChild(div.firstElementChild); )4.4 删除元素defremove_element(selector):删除元素canvas(actioneval,javaScriptf const element document.querySelector({selector}); if (element) element.remove(); )4.5 修改属性defset_attribute(selector,attr,value):设置属性canvas(actioneval,javaScriptf document.querySelector({selector}).setAttribute({attr}, {value}); )5. 样式控制5.1 修改内联样式defset_style(selector,property,value):设置样式canvas(actioneval,javaScriptf document.querySelector({selector}).style.{property} {value}; )# 使用示例set_style(#header,backgroundColor,#667eea)set_style(#content,display,none)5.2 添加/删除类defadd_class(selector,class_name):添加类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.add({class_name}); )defremove_class(selector,class_name):删除类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.remove({class_name}); )deftoggle_class(selector,class_name):切换类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.toggle({class_name}); )5.3 主题切换deftoggle_theme():切换主题canvas(actioneval,javaScript document.body.classList.toggle(dark-theme); )6. 事件处理6.1 触发点击deftrigger_click(selector):触发点击事件canvas(actioneval,javaScriptf document.querySelector({selector}).click(); )6.2 触发表单提交defsubmit_form(form_selector):提交表单canvas(actioneval,javaScriptf document.querySelector({form_selector}).submit(); )6.3 触发自定义事件deftrigger_custom_event(selector,event_name,detailNone):触发自定义事件detail_jsonjson.dumps(detail)ifdetailelse{}canvas(actioneval,javaScriptf const event new CustomEvent({event_name}, {{ detail:{detail_json}}}); document.querySelector({selector}).dispatchEvent(event); )7. 实战案例一动态数据更新7.1 场景描述实时更新 Canvas 中的数据展示。7.2 实现代码defupdate_dashboard(data):更新仪表盘数据# 构建更新脚本updates[]forkey,valueindata.items():updates.append(fdocument.getElementById({key}).textContent {value};)canvas(actioneval,javaScript\n.join(updates))# 使用示例update_dashboard({total-users:1,234,active-users:567,requests:12,345,success-rate:99.5%})7.3 更新图表defupdate_chart(chart_id,new_data):更新图表数据canvas(actioneval,javaScriptf const chart Chart.getChart({chart_id}); if (chart) {{ chart.data.datasets[0].data {json.dumps(new_data)}; chart.update(); }} )8. 实战案例二表单自动填充8.1 场景描述自动填充表单数据。8.2 实现代码deffill_form(data):填充表单fill_scripts[]forfield,valueindata.items():scriptf const field document.querySelector([name{field}], #{field}); if (field) {{ if (field.type checkbox || field.type radio) {{ field.checked {str(value).lower()}; }} else if (field.tagName SELECT) {{ field.value {value}; }} else {{ field.value {value}; }} }} fill_scripts.append(script)canvas(actioneval,javaScript\n.join(fill_scripts))# 使用示例fill_form({username:admin,email:adminexample.com,role:admin,active:True})9. 实战案例三内容提取9.1 场景描述从 Canvas 中提取结构化数据。9.2 实现代码defextract_table_data(table_selector):提取表格数据returncanvas(actioneval,javaScriptf const table document.querySelector({table_selector}); const rows table.querySelectorAll(tr); const data []; rows.forEach(row {{ const cells row.querySelectorAll(td, th); const rowData []; cells.forEach(cell rowData.push(cell.textContent.trim())); data.push(rowData); }}); JSON.stringify(data); )defextract_list_data(list_selector):提取列表数据returncanvas(actioneval,javaScriptf const items document.querySelectorAll({list_selector} li); const data []; items.forEach(item {{ data.push(item.textContent.trim()); }}); JSON.stringify(data); )10. 高级技巧10.1 异步操作defasync_operation():异步操作returncanvas(actioneval,javaScript (async () { const response await fetch(/api/data); const data await response.json(); return JSON.stringify(data); })() )10.2 等待元素defwait_for_element(selector,timeout5000):等待元素出现returncanvas(actioneval,javaScriptf (async () {{ const start Date.now(); while (Date.now() - start {timeout}) {{ const element document.querySelector({selector}); if (element) return true; await new Promise(r setTimeout(r, 100)); }} return false; }})() )10.3 批量操作defbatch_dom_operations(operations):批量DOM操作scripts[]foropinoperations:ifop[type]setText:scripts.append(fdocument.querySelector({op[selector]}).textContent {op[value]};)elifop[type]setHtml:scripts.append(fdocument.querySelector({op[selector]}).innerHTML {op[value]};)elifop[type]click:scripts.append(fdocument.querySelector({op[selector]}).click();)canvas(actioneval,javaScript\n.join(scripts))11. 安全注意事项11.1 安全风险风险说明防护措施XSS攻击注入恶意脚本转义用户输入数据泄露读取敏感数据权限控制无限循环死循环脚本超时限制DOM破坏破坏页面结构操作验证11.2 安全实践defsafe_eval(script,user_input):安全的执行# 转义用户输入escapeduser_input.replace(,\\).replace(,\\)# 使用参数化脚本safe_scriptscript.replace({input},escaped)returncanvas(actioneval,javaScriptsafe_script)12. 总结12.1 核心要点要点说明数据获取读取页面内容和数据DOM操作修改元素和结构样式控制动态修改样式事件触发触发页面事件12.2 最佳实践转义用户输入使用参数化脚本添加错误处理限制执行时间12.3 下一步第54篇OpenClaw Canvas 截图页面捕获与保存第55篇OpenClaw Canvas A2UI交互式界面开发参考资料OpenClaw 官方文档JavaScript DOM操作XSS防护
OpenClaw Canvas 执行：JavaScript 注入实战
发布时间：2026/5/31 14:03:06
目录摘要1. 引言 - JavaScript 执行的价值1.1 JS 执行应用场景1.2 eval 功能概览1.3 执行方式2. 基本执行操作2.1 执行简单脚本2.2 获取页面信息2.3 执行多行脚本3. 数据获取3.1 获取元素内容3.2 获取表单数据3.3 获取所有输入值3.4 获取计算样式4. DOM 操作4.1 修改元素内容4.2 修改元素HTML4.3 添加元素4.4 删除元素4.5 修改属性5. 样式控制5.1 修改内联样式5.2 添加/删除类5.3 主题切换6. 事件处理6.1 触发点击6.2 触发表单提交6.3 触发自定义事件7. 实战案例一动态数据更新7.1 场景描述7.2 实现代码7.3 更新图表8. 实战案例二表单自动填充8.1 场景描述8.2 实现代码9. 实战案例三内容提取9.1 场景描述9.2 实现代码10. 高级技巧10.1 异步操作10.2 等待元素10.3 批量操作11. 安全注意事项11.1 安全风险11.2 安全实践12. 总结12.1 核心要点12.2 最佳实践12.3 下一步参考资料摘要本文深入探讨 OpenClaw Canvas 的 JavaScript 执行功能。从基本执行、数据获取、DOM操作到高级应用全面解析如何通过 eval 注入 JavaScript 实现灵活的界面控制。通过实际案例演示数据提取、动态更新、事件处理等场景帮助开发者掌握 Canvas 的高级控制能力。⚡1. 引言 - JavaScript 执行的价值1.1 JS 执行应用场景场景说明示例数据获取获取页面数据读取表单值DOM操作修改页面元素更新内容事件触发触发页面事件点击按钮动态更新实时更新内容刷新数据样式控制动态修改样式切换主题1.2 eval 功能概览eval 执行执行类型数据读取DOM修改事件触发样式控制返回结果1.3 执行方式方式说明返回值同步执行立即执行并返回有异步执行异步执行Promise2. 基本执行操作2.1 执行简单脚本resultcanvas(actioneval,javaScript1 1)# result 22.2 获取页面信息# 获取标题titlecanvas(actioneval,javaScriptdocument.title)# 获取URLurlcanvas(actioneval,javaScriptwindow.location.href)# 获取HTMLhtmlcanvas(actioneval,javaScriptdocument.documentElement.outerHTML)2.3 执行多行脚本resultcanvas(actioneval,javaScript const title document.title; const url window.location.href; JSON.stringify({ title, url }); )3. 数据获取3.1 获取元素内容defget_element_text(selector):获取元素文本returncanvas(actioneval,javaScriptf document.querySelector({selector}).textContent )# 使用示例textget_element_text(#main-title)3.2 获取表单数据defget_form_data(form_selector):获取表单数据returncanvas(actioneval,javaScriptf const form document.querySelector({form_selector}); const formData new FormData(form); const data {{}}; for (let [key, value] of formData.entries()) {{ data[key] value; }} JSON.stringify(data); )3.3 获取所有输入值defget_all_inputs():获取所有输入框的值returncanvas(actioneval,javaScript const inputs document.querySelectorAll(input, textarea, select); const data {}; inputs.forEach(input { const name input.name || input.id; if (name) { data[name] input.value; } }); JSON.stringify(data); )3.4 获取计算样式defget_computed_style(selector,property):获取计算样式returncanvas(actioneval,javaScriptf const element document.querySelector({selector}); window.getComputedStyle(element).getPropertyValue({property}); )4. DOM 操作4.1 修改元素内容defset_element_text(selector,text):设置元素文本canvas(actioneval,javaScriptf document.querySelector({selector}).textContent {text}; )4.2 修改元素HTMLdefset_element_html(selector,html):设置元素HTMLcanvas(actioneval,javaScriptf document.querySelector({selector}).innerHTML {html}; )4.3 添加元素defappend_element(parent_selector,html):添加子元素canvas(actioneval,javaScriptf const parent document.querySelector({parent_selector}); const div document.createElement(div); div.innerHTML {html}; parent.appendChild(div.firstElementChild); )4.4 删除元素defremove_element(selector):删除元素canvas(actioneval,javaScriptf const element document.querySelector({selector}); if (element) element.remove(); )4.5 修改属性defset_attribute(selector,attr,value):设置属性canvas(actioneval,javaScriptf document.querySelector({selector}).setAttribute({attr}, {value}); )5. 样式控制5.1 修改内联样式defset_style(selector,property,value):设置样式canvas(actioneval,javaScriptf document.querySelector({selector}).style.{property} {value}; )# 使用示例set_style(#header,backgroundColor,#667eea)set_style(#content,display,none)5.2 添加/删除类defadd_class(selector,class_name):添加类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.add({class_name}); )defremove_class(selector,class_name):删除类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.remove({class_name}); )deftoggle_class(selector,class_name):切换类canvas(actioneval,javaScriptf document.querySelector({selector}).classList.toggle({class_name}); )5.3 主题切换deftoggle_theme():切换主题canvas(actioneval,javaScript document.body.classList.toggle(dark-theme); )6. 事件处理6.1 触发点击deftrigger_click(selector):触发点击事件canvas(actioneval,javaScriptf document.querySelector({selector}).click(); )6.2 触发表单提交defsubmit_form(form_selector):提交表单canvas(actioneval,javaScriptf document.querySelector({form_selector}).submit(); )6.3 触发自定义事件deftrigger_custom_event(selector,event_name,detailNone):触发自定义事件detail_jsonjson.dumps(detail)ifdetailelse{}canvas(actioneval,javaScriptf const event new CustomEvent({event_name}, {{ detail:{detail_json}}}); document.querySelector({selector}).dispatchEvent(event); )7. 实战案例一动态数据更新7.1 场景描述实时更新 Canvas 中的数据展示。7.2 实现代码defupdate_dashboard(data):更新仪表盘数据# 构建更新脚本updates[]forkey,valueindata.items():updates.append(fdocument.getElementById({key}).textContent {value};)canvas(actioneval,javaScript\n.join(updates))# 使用示例update_dashboard({total-users:1,234,active-users:567,requests:12,345,success-rate:99.5%})7.3 更新图表defupdate_chart(chart_id,new_data):更新图表数据canvas(actioneval,javaScriptf const chart Chart.getChart({chart_id}); if (chart) {{ chart.data.datasets[0].data {json.dumps(new_data)}; chart.update(); }} )8. 实战案例二表单自动填充8.1 场景描述自动填充表单数据。8.2 实现代码deffill_form(data):填充表单fill_scripts[]forfield,valueindata.items():scriptf const field document.querySelector([name{field}], #{field}); if (field) {{ if (field.type checkbox || field.type radio) {{ field.checked {str(value).lower()}; }} else if (field.tagName SELECT) {{ field.value {value}; }} else {{ field.value {value}; }} }} fill_scripts.append(script)canvas(actioneval,javaScript\n.join(fill_scripts))# 使用示例fill_form({username:admin,email:adminexample.com,role:admin,active:True})9. 实战案例三内容提取9.1 场景描述从 Canvas 中提取结构化数据。9.2 实现代码defextract_table_data(table_selector):提取表格数据returncanvas(actioneval,javaScriptf const table document.querySelector({table_selector}); const rows table.querySelectorAll(tr); const data []; rows.forEach(row {{ const cells row.querySelectorAll(td, th); const rowData []; cells.forEach(cell rowData.push(cell.textContent.trim())); data.push(rowData); }}); JSON.stringify(data); )defextract_list_data(list_selector):提取列表数据returncanvas(actioneval,javaScriptf const items document.querySelectorAll({list_selector} li); const data []; items.forEach(item {{ data.push(item.textContent.trim()); }}); JSON.stringify(data); )10. 高级技巧10.1 异步操作defasync_operation():异步操作returncanvas(actioneval,javaScript (async () { const response await fetch(/api/data); const data await response.json(); return JSON.stringify(data); })() )10.2 等待元素defwait_for_element(selector,timeout5000):等待元素出现returncanvas(actioneval,javaScriptf (async () {{ const start Date.now(); while (Date.now() - start {timeout}) {{ const element document.querySelector({selector}); if (element) return true; await new Promise(r setTimeout(r, 100)); }} return false; }})() )10.3 批量操作defbatch_dom_operations(operations):批量DOM操作scripts[]foropinoperations:ifop[type]setText:scripts.append(fdocument.querySelector({op[selector]}).textContent {op[value]};)elifop[type]setHtml:scripts.append(fdocument.querySelector({op[selector]}).innerHTML {op[value]};)elifop[type]click:scripts.append(fdocument.querySelector({op[selector]}).click();)canvas(actioneval,javaScript\n.join(scripts))11. 安全注意事项11.1 安全风险风险说明防护措施XSS攻击注入恶意脚本转义用户输入数据泄露读取敏感数据权限控制无限循环死循环脚本超时限制DOM破坏破坏页面结构操作验证11.2 安全实践defsafe_eval(script,user_input):安全的执行# 转义用户输入escapeduser_input.replace(,\\).replace(,\\)# 使用参数化脚本safe_scriptscript.replace({input},escaped)returncanvas(actioneval,javaScriptsafe_script)12. 总结12.1 核心要点要点说明数据获取读取页面内容和数据DOM操作修改元素和结构样式控制动态修改样式事件触发触发页面事件12.2 最佳实践转义用户输入使用参数化脚本添加错误处理限制执行时间12.3 下一步第54篇OpenClaw Canvas 截图页面捕获与保存第55篇OpenClaw Canvas A2UI交互式界面开发参考资料OpenClaw 官方文档JavaScript DOM操作XSS防护
