I am writing a chrome extension that accesses the active tab page and manipulates the DOM by injecting some code with a content script. However, I am having no luck when it comes to firing event handlers that should be registered by the active tab page's own JavaScript.
For example, on the web page itself there is a save button that saves all the form data when clicked. On my chrome extension, I have a button that, when clicked, sends a message to a content script. The content script then has a line of code to fire the web page save button's event handler to save the form data, but it does not work, even when I tell it to do so using $('#btnSave').click().
Another example, I have a button on my chrome extension that when clicked, selects a value from the drop down list located on the web page. It selects the value fine, but it does not fire the change event for the drop down list, even when I explicitly tell it to do so using $('#ddl').change().
Both commands fire the respective controls events fine when I type them in the console, but not when using them in my content script. So how do I access the web page's event handlers from my content script?
P.S. Have also tried invoking event handler using .trigger(event), .triggerHandler(event), .change() for select, and my code is wrapped inside $(document).ready().
Setting a value programatically does not fire the change event. Just like calling click() does not necessarily call all the handlers. You have to manually fire it. I would suggest you use the function at this answer since it's not jQuery specific.
Note that if you use the function mentioned, you can fire a click event and it will behave just as if a user clicked something. However, for the change event, you have to make the change programatically and then fire the change event
// Trigger a user click and the event
fireEvent($('#btnSave')[0], 'click');
// Make a change and fire a change event
var ddl = $('#ddl');
ddl.val('something');
fireEvent(ddl[0], 'change')
Related
I'm really hoping there is a way of doing this.
Standard behaviour is that if a button is clicked on a web page while the browser window was not the active window, that first click just makes the browser active. Only the second click is picked up on an event listener.
Is there a way to override this, so the even listener is triggered even on that first click? Either vanilla or using a library would be fine.
I'm trying to solve a Bootstrap ScrollSpy issue where clicking the tab links is not doing anything (though scrolling properly highlights the tabs). I noticed that the same Bootstrap click event handler is showing up twice in Chrome Developer Tools (I've verified that if I click on each of the links, it brings me to the same line in the same file).
Why would the same exact click handler be appearing twice? I've also verified that Bootstrap is only being included once.
Try clicking that bootstrap.js link that you're pointing to in your screenshot, and adding a line-of-code breakpoint on the line that registers the event listener. If you think that the event listener gets registered when the page loads, then reload the page. The page should stop because of the breakpoint. The Call Stack pane should help you figure out why the event listener was registered. Resume script execution and you should see the event listener get registered again. If the event listener doesn't get registered on page load, then just interact with the page in a way that you would expect to create the listener.
See Get Started With Debugging if you're unfamiliar with stepping through code with DevTools.
I have an HTML page that includes only a script tag, I don't control the script and I can't change it (so I can't fire my custom event for example).
The script ends with a redirect (using window.location).
Is there a way to add a new script to the page that will listen to the page events and "catch" the redirect (actually it's better for me to catch the new loaded document)?
Something like:
window.addEventListener('redirected', function() {
// do staff
});
(I know there is no "redirected" event, it's just for the example).
It's very important to make it clear that the redirect isn't caused by an anchor click or back/forward button click, so I can't use events like click or popstate.
You might want to look at the onpagehide event or the onunload event, both of which occur when the user navigates away from the page.
However, if you wish to interfere or prevent the redirection itself, onbeforeunload is what you want.
Just take a look at :
unload function w3school or mozilla developper network
beacon function for sending a final XMLHttpRequest
I inspected an element inside an iframe within Firebug. I am able to select the element in the page and it is shown within the HTML panel. The element has a JavaScript call on select, which I am unable to see within the Script panel to add a breakpoint to it.
I tried to call the function using the command line, though that doesn't work.
The Events side panel is where you can set a breakpoint for the event handler. While the element is selected, switch to that panel, right-click the onchange(event) event handler and choose Set Breakpoint.
Note that Firebug won't work anymore once multi-process Firefox is enabled (which seems to be the case in Firefox 49).
As far as I can see, unfortunately, neither the Firefox nor the Chrome DevTools allow to set a breakpoint on the event handler. They only allow you to jump to the place where the handler is called within the HTML code.
I need to do something when leaving page (page '#first').
It's really simple:
$(document).on('pagebeforehide', '#first', function(event, ui) {alert('leaving page');});
No problem when I leave page by "inner" links something like this one:
Open something
here event fired and handler executed.
But when I want to open external link like this one:
Open something
here event not fired and handler not executed.
Doesn't matter is page content simple or complex - I found that this depends only on fact whether link inner or external.
What's wrong?
rel="external" means that page will be opened as an external page and all previous page content (including its scripts) will be lost, that will also trigger a full page refresh so your pagebeforehide event is not going to trigger because it will no longer exist.
jQuery Mobile page events can occur only during normal page changes. Basically what I want to say is you need to go to the other jQuery Mobile page for this event to trigger. In your case you are forcing app to do a full page refresh, at this point, page refresh will occur before pagebeforehide event.
EDIT :
While there isn't any crossbrowser solution for this you can always cheat.
Instead of having href link inside your button, replace your link http://www.google.com with # and add it an id so we can identify it, like this:
Open something
Now add a click event to this button and do what ever needs to be done before changing page to www.google.com:
$(document).on('click', '#change-page', function(){
// Do something here then change page
});
Or link your button to another dummy inner page (use this inner page only for this purpose), catch pagebeforehide on it:
$(document).on('pagebeforehide ', function(){
// Again do something here and manualy change the page
});