利用ES6里标准化的JavaScript proxy对象拦截 C4C页面的HTML div原生操作

举报
Jerry Wang 发表于 2022/03/31 22:38:19 2022/03/31
【摘要】 SAP Cloud for Customer的UI实现里,有不少使用JavaScript在运行时动态创建div标签的例子。如果想研究这些情形发生的上下文,我们可以使用ES6提供的标准Proxy对象,给浏览器原生的document.createElement方法注入一个proxy,里面设置一个断点。这样每当div标签页被动态创建时,我们注入的proxy将会取代标准的document.creat...

SAP Cloud for Customer的UI实现里,有不少使用JavaScript在运行时动态创建div标签的例子。

如果想研究这些情形发生的上下文,我们可以使用ES6提供的标准Proxy对象,给浏览器原生的document.createElement方法注入一个proxy,里面设置一个断点。这样每当div标签页被动态创建时,我们注入的proxy将会取代标准的document.createElement被浏览器调用。从断点停下来的调用上下文,我们即可观测到更多信息。

const handler = { // Our hook to keep the track
    apply: function (target, thisArg, args){
        console.log("Jerry Intercepted a call tocreateElement with args: " + args);
        debugger;
        return target.apply(thisArg, args)
    }
}
document.createElement= new Proxy(document.createElement, handler);

比如每次SAP Cloud for Customer UI出现busy indicator的动画效果时,其实浏览器就是残躯新建一个div标签的方式实现的。

使用setTimeout实现busy indicator的动态效果。



例子如下:

https://<host>/sap/fpa/ui/tenants/008/app.html#;view_id=story;storyId=E1E3EAF366F3CCAD5AD936E67714AFCF;f01Model=t.9.CBGDBM56H1FN8SP62W3ZERTNNK:CBGDBM56H1FN8SP62W3ZERTNNK;f01Dim=Entity;f01Val=[%22China%22,%22United%20States%22]

上述例子传递了两个值给technical ID为Entity的dimension,描述信息为Country Name,传递的两个值是encode过后的China和United States:

可以利用SAP Analytics Cloud自带的Compare to Previous Day功能,将当天的值同前一天的值相比较:



如果一个page里所有的图使用的是同一个model,则该model可以在url里省略。

https://<host>/sap/fpa/ui/tenants/008/app.html#;view_id=story;storyId=E1E3EAF366F3CCAD5AD936E67714AFCF;f01Dim=Entity;f01Val=China

model ID可以通过这个url查看:

https://de.ap1.projectorca.cloud/api/v1/stories?include=models

以Github网站为例,

F12打开Chrome开发者工具,Security标签页,View certificate,点击view detais,选择Copy to file.

事务码STRUST,打开SSL client SSL Client (Standard),切换到编辑模式:


选择import certificate,选择之前从Chrome导出的certificate,点击Add to certificate list.

重启ICM,使certificate立即生效。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200