We are busy with a web project where we need to capture a signature from a USB device. Getting this to work was pretty simple, but you need a browser add on.
However, once the page is placed into an iFrame (All on the same domain), it stops working. No errors or warnings, just does nothing when you click the button. It looks like the document.dispatchEvent function is not working... I think... I can see the custom event listener in Chrome dev tools.
The thing is, I added an event listener for click and that works on the page inside the iframe. It seems that dispatching custom events is not working.
Now, I'm far from an expert here and after hours of Googling and trying all sorts of different methods of which none worked I am running out of time and need help.
Is there some kind of limitation for custom events in an iframe? Security issue?
I created a JSFiddle using the example page from the company who makes the signature pads. (See below how to install browser addon). If you run the example on it's own, you will see a popup open up when you click the Sign button. You don't actually need the device for the popup to open. When the example page is in an iframe, it does nothing.
We need this to work on linux and windows, but I have the exact same issue on both platforms using google chrome.
<iframe style="width: 100%; height: 500px;" src="https://www.esignemcee.net/SigCaptureWeb/sign_chrome_ff_sigcapturewebsdk.html"></iframe>
JSFiddle
Chrome add-on install guid
EPad Signature example page
Adding top to my code seems to fix the problem. If you load your page in a iframe and need to add event listeners and dispatch those event in the 'child' page, then add top to your code like:
$(document).ready(function (){
top.document.addEventListener("MyCustom", _CustomHandler, true);
setTimeout(function ()
{
var MyDetail =
{
message: "blablabla"
};
var event = new CustomEvent('MyCustom', { detail: MyDetail });
top.document.dispatchEvent(event);
}, 1000);});
function _CustomHandler(EventData){
alert(EventData.detail.message);}
This seems to only be an issue when trying to engage with extensions in chrome. Normal events seem to work just fine. As such the code I've added above will work either way, but this is just to show exactly how the 'top' keyword is used.
Hopefully leaving this here will prevent someone else from spending 4 days trying to figure out why dispatching some events work in an iframe and some don't when using chrome. Chrome seems to handle events dispatched for extensions slightly different. I've not been able to find any documentation on this, but custom events and working with extensions like this from javascript is knew for me. Maybe someone more knowledgeable can add some more info.
Related
When making myself familiar with unknown code, I often find myself trapped in a situation where I have a huge amount of javscript files and some events triggered when I click around in the browser, which I want to detect in the code. However, regarding the amount of js code, this seems to be a non-trivial task to me.
Is there any tool / workaround that supports me? Like logging every js function called or the like?
The way of debugging js is different in different browser. I will show how to debug in chrome.
First of all, inspect the button in chrome using chrome developer tools.
Then you can see the event listeners attached to that particular button. Make sure ancestors all checkbox is unchecked and the link below the event listener will you to particular code file.
I am the developer of Boxy, a famous native wrapper around Inbox by Gmail, and wanted to ask if anyone is able to help with something I have been struggling with since day one of development.
Here is the problem: links on inbox.google.com and gmail.com work differently than on other sites: clicking on them does not trigger a navigation action on my webview (I am using a WKWebView specifically, but the problem is also present using the old WebView). So I am having a difficult time opening links in an external browser when appropriate.
Because of this, at the time of this writing, I am relying on a terrible hack in order to open links: intercepting clicks on the document.body with javascript (using an event listener) and then forcing them to open on the external browser by calling the native app.
My best guess is that the Gmail/Inbox apps perform some javascript magic in order to track clicks on all the links inside emails and that, somehow, this interfers with the standard behaviour.
Has anyone got any idea how I can solve this problem?
Things I already tried
Implementing the method -webView:createWebViewWithConfiguration:forNavigationAction:windowFeatures: of WKUIDelegate. Did not work: the method is called but the request associated with the navigation action is empty.
I found a solution. This issue is due to when clicking link, instead of opening using target=_blank, Gmail attempts to open an about:blank window and then run javascript to redirect the link.
You need to make sure that Gmail can correctly receive the handle of the created window.
- (WKWebView *)webView:(WebUI *)webView
createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration
forNavigationAction:(WKNavigationAction *)navigationAction
windowFeatures:(WKWindowFeatures *)windowFeatures
You need to make sure this delegate method correctly returns the newly created wkwebview.
As a freelance Wordpress developer I find myself thrown into projects where things are just 'broken' - with the problems regularly ending up being some kind of path issue/syntax error/etc in javascript.
I am in the situation right now where I am trying to get something that works in Site A to work on Site B. Basically the problem involves a mouse over event that causes a div with class name 'overlay-ico' to appear.
I'm sure there must be some kind of debug tool in Chrome, Firefox, etc that allows me to easily do this without reviewing all the source code?
Update:
I am familiar with being able to inspect the HTML (at least in a basic way), but I don't see how this shows me what would trigger an event to occur.
I am also know that there is a console, which as I understand it, only outputs errors, or something that has been explicitly directed to console output.
There must be somewhere in the code that is waiting for a mouse over event, that triggers 'overlay-ico' to appear. I'm sure I could do it if I did a search for 'overlay-ico' through all the source code - but I'm thinking there must be a faster way to find it.
In Windows, F12 opens the debug panel in most browsers.
In Chrome, you can inspect an element and then click into the Event Listeners tab in the right pane. That may show what you're after. It's hard to say without seeing it.
I came across this question:
How to find out which JavaScript events fired?
But, that method of using Firebug will help me only if I log the events of a particular element right?
Here's my situation:
I want to analyze a webpage. It displays a list of headlines, and after you scroll down at the bottom of the page, something happens and then it fetches the next 20 headlines from the server and adds it back to the page. I would like to know exactly which event is fired and which function is called as this happens. How do I do that?
Use Chrome or Firefox Developer Tools and check under the networks tab.
For Firebug check console or scripts.
It shows you all the external files that have been used in your page.
Don't forget about
console.log("event fired");
I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!