ES6 in the use of standardized JavaScript proxy objects interception SAP C4C page of HTML div native operating

UI implementation SAP Cloud for Customer's, there are many examples of using JavaScript to dynamically create a div tag at runtime.

If you want to study the context of these situations occur, we can use the standard Proxy objects ES6 provided to the browser native document.createElement method of injecting a proxy, which set a breakpoint. Whenever such a div tag pages are created dynamically, we inject the proxy will replace the standard document.createElement is called a browser. From the breakpoint to stop the calling context, we can observe more information.

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);

For example, each time the animated busy indicator of the SAP Cloud for Customer UI appears, in fact, the browser is the residual footer div tag to create a new way to achieve.

Use setTimeout dynamic busy indicator of the effect.

For more Jerry's original article, please pay attention to the public number "Wang Zixi":