I couldn't find it anywhere on Mozilla's documentation. Suppose I code an extension that uses addEventListener on keypress. What is the execution priority if a webpage contains a JS code that calls addEventListener on keypress (or keydown) too? Is it guaranteed that my extension receives the event first?
The event first goes through a "capturing" phase, then a "bubbling" phase. If you use the capturing phase (by putting true as the last parameter to addEventListener) then your listener will get called before the one on the page, if the one on the page uses the bubbling phase. I guess if you don't know which way it works on the page, then you could just attach it to something out of reach of the page (like the browser object, or even gBrowser) and then you would be sure that yours goes first. See http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
Related
I am using Delphi XE2 and Chromium CEF4Delphi. I am trying to use a web page via the TChromiumWindow component and would like to detect when an element is selected / clicked.
I saw this post..
Delphi Chromium - launch a command in Delphi application when button in web page is clicked by user
Unfortunately, I cant find the function AddEventListenerProc in the CEF4Delphi library. Neither can I find an alternative way to monitor a button / element click.
I would like to use the TChromiumWindow component to act as a "fron-end" to my app and would like to monitor user button clicks etc.
Can anyone help please ? I did try the developer forum but I dont see much activity there and was unable to register.
Many thanks..
The DCEF3 project has a group here : https://groups.google.com/forum/#!forum/delphichromiumembedded
But the CEF4Delphi and OldCEF4Delphi projects have a developers forum here :
https://www.briskbard.com/forum/
That forum has new posts almost every day and I try to answer them as soon as I can, usually in less than 24 hours.
If you have problems creating an account just send me a message and I'll activate your account manually.
The link you posted is very old and many things have changed in CEF since 2012.
There are several ways to detect when a HTML element has been selected, clicked, etc.
You can use a JavaScript event like "onclick" that calls a custom JavaScript extension. That extension would send a process message to the browser process to notify that the user clicked that element.
You can also use the GlobalCEFApp.OnFocusedNodeChanged that is triggered when an HTML element has been focused. This event is executed in the "render" process so you will also need to send a process message to the main browser process that the focused element has changed.
Use the JSRTTIExtension or the JSExtension demos as a template for your app.
They show you how to set a "mouseover" event that calls the "myextension.mouseover" function defined in a custom JS extension. The myextension.mouseover function executes Delphi code and sends a process message to the main browser process with some HTML information that is shown in the status bar.
They also have an example for a "MutationObserver" that calls a generic "myextension.sendresulttobrowser" function in the JS extension that sends the "value" attribute to the browser process.
Build the demo and right-click on the web page when it's fully loaded. Then select the "Set mouseover event" or "Add mutation observer" options to test what I described.
I'm using the Off-screen rendering component TChromiumOSR in the dcef3 package - the Delphi wrapper for Chromium-embedded library.
Situation
FormA contains a TChromiumOSR and paints the output.
Modal FormB modifies the web page by executing some js code against FormA.TChromiumOSR.
Issue
The TChromiumOSR.OnPaint event (in FormA) is not triggered until FormB.ShowModal returns.
Notes
There is no such issue in the above described situation (under a modal form) with the standard TChromium control.
I assume the `TForm.ShowModal' method only blocks the input of the background forms, but not the painting?
Or does it caused by the internal working of cef3?
Anyway, how to solve it? Thanks.
dcef3 master branch is here
I've succeeded updating an HTML element by using the ExecuteJavaScript method called from a modal form. But you might have use CEF V8 as well (that's what I haven't tested). For cases when you need to invalidate the current view manually, you can call Invalidate:
MyChromiumOSR.Browser.Host.Invalidate(PET_VIEW);
But that's workaround rather than solution. Invalidating of relevant elements should happen by the CEF engine for you. And if you come up with an MCVE, I can investigate more about your specific problem.
Ok, I found the source of the problem - it's not a bug in cef3 or dcef3 but was caused by my improper use of Delphi Event Bus, and the following are the steps to reproduce the issue:
In one the 'delphi event bus' handler, the program shows a modal form at this point the execution of the main thread is blocked.
On top of the modal form, the user doing certain actions will start a background thread, which in turn will send a message to the main thread, which in turn will calls the 'delphi event bus' to post another new event, which in turn will execute some js code to update the web page inside dcef3, which in turn will trigger some of the dcef3 events (in the main thread), and here is where the program stuck - since the TEventBus.Post() method is locked by a TCriticalSection.
Solution:
In Step #1, don't call ShowModal directly, but use a technique such as PostMessage winapi to 'delay' the execution of ShowModal.
I'm not sure if I have described it clearly...
I'm trying to track Page Load Event. I'm getting utag.js from Omniture.
I'm also wrapping it with jQuery: $.getScript to make sure that script is loaded.
But even then if I try to set my s.pageName or s.t(); I'm getting error that s is undefined. If I put a 500 ms timeout everything works fine. But I'm surprised that I need to wait even after script is loaded. Is it a common practice with Omniture?
I'm new to the Omniture, it might be very obvious thing for the more experienced users of Omniture.
utag.js is a Tealium loader, which I assume has Adobe Analytics code within it. The only thing that would prevent s from being defined after utag.js being loaded would be that the appmeasurement code is being loaded asynchronously.
You can find more about asynchronous loading here: https://tealium.com/blog/standard/asynchronous-tagging/
I would expect that once you switched to synchronous loading, the variables after utag.js will be able to reference the appmeasurement library.
App Measurement is not designed to be loaded asynchronously. I would suggest adding a "flag" that will indicate when utag.js has loaded and then reference the s.object.
I'm using DTM to implement Adobe Analytics code on a single page app.
I have a link that we've set up successfully as an exit link and it fires as it should. If this matters, it opens in a new tab and we don't actually exit the website. However, any time we fire off any subsequent page views, we see the same event fired. Is there any way to fire off this event only when the link actually is clicked? I assume that because it's a one page app and the code isn't getting refreshed that is the reason it's on every subsequent page.
Using Adobe Analytics and DTM is frustrating with single page apps. What we do is clear all the variables that are set before each page view. We have a function that clears, props, evars, events, listVars, heir, pageName etc.
Please check witch version of s_code you are using, if you are using Appmeasurement or one of the last s_code versions please use clearkVars() function.
following code is a log from browser console with console responses:
s.events ="event1"
"event1"
s.linkTrackVars='events';
"events"
s.eVar1="value"
"value"
s.clearVars();
undefined
s.events
undefined
s.eVar1
undefined
you can fire this in custom code section (if your custom code section is set to fire after gui settings, or you can fire it as JavaScript 3rd party tag.
I'm using the native Facebook Titanium module and I have the following issue.
In my app, you can login to FB from two different windows.
In the first one, I instatiated the module and added to the module a 'login' listener.
In the second window I did the same, I instantiated the module and added a 'login' listener.
Problem is the following: the second addEventListener doesn't overwrite the first (it looks like the second Facebook 'require' is simply a pointer to the module instantiated in the first window).
So, it happens the following: when I try to authorize the user and I enter the login listener, it turns out I'm always calling the first one, not the second (the second never gets called).
I tried to remove the first eventListener with no luck. Moreover, they 'live' in distant windows and it seems there's no way to remove this listener correctly.
Any help is appreciated,
Iannis
I hope this will clarify what you are seeing:
It's standard CommonJS behaviour that modules are cached and the second and following require() will get you a reference to the first instance.
Like the name says addEventListener adds an event listener and does not replace one added earlier.
You should get the login event twice, once for each event listener you add. I can't tell why it doesn't do that for you without further insight in your code.