Get URL of a webpage dynamically with Javascript on a Firefox extension - javascript

I'd like to get the URL of a webpage dynamically (i.e if the url changes get the new url) using Javascript with a Firefox extension.
So far I've tried to use an event listener attached to the current window but it doesn't work.
( Display Webpage current URL with Firefox extension )
Can someone post some code to show me a way to achieve this please ?

You could add an event listener to the URL bar (I explained in a comment why the code in the answer to your old question didn't work) but frankly - this isn't the best way. URL bar contents can also change if the user starts typing into it for example. And the user could even choose to remove the URL bar from the browser window.
The best way to achieve this is implementing a progress listener. You can find example code and explanation on https://developer.mozilla.org/en/Code_snippets/Progress_Listeners. You would be interested in calls to the onLocationChange method, that will happen every time the URL bar contents need to change (also when the user switches between tabs).

You could try listening to the hashchange event on window object. Both chrome and firefox support it. Not sure about IE though.
window.onhashchange = function () {
hashChanged(window.location.hash);
}
If your browser doesn't support "hashchange" event, you could use this plugin http://benalman.com/projects/jquery-hashchange-plugin/ .

Related

What do websites like YouTube use to change the URL without fireing popstate or beforeunload?

I noticed that YouTube doesn't actually reload when you click a link/video on their website. If you define a variable in the console you'll see it will persist.
But neither popstate nor beforeunload get fired. So how is Youtube accomplishing that? And how can I detect that URL change without making a timer constantly check the URL bar.
window.onpopstate = function(event) {
console.log('popstate test!')
return "test"
}
window.onbeforeunload = function(event) {
console.log('beforeunload test!')
return "test"
}
I'm not just looking for a YouTube-solution, I'm looking for a general solution that covers the technology YouTube is using.
They're using onpopstate. Paste your JavaScript into the JavaScript console, click on a video, and then click the Back button. You should now see "popstate test!" in the console.
The real problem here is that there's no onpushstate event, but this person seems to have implemented it. There was also a previous StackOverflow question about it. However, this don't seem to work for YouTube, perhaps because they are trying to edit the pushState property of history, but YouTube actually stored history.pushState in a separate variable and is thus unaffected by this code.
However, this transitionend event on the #progress element just for YouTube seems to work.
This can actually be implemented in a really simple way. Suppose you have a link in your webpage
<a id="mylink" href="/new-url">My link</a>
You can override its behavior by returning false from an event handler:
document.getElementById("mylink").onclick = function (event) {
window.history.pushState({urlPath:'/new-url'}, "", "/new-url");
// use ajax to reload parts of the page here
return false;
}
Using this technique you can make only part of the page reload when clicking the link.
Edit
I believe youtube does not listen in any way for location changes. This is because if you actually call
window.location = '/watch?v=notrelevant'
The webpage is still refreshed.

JavaScript click event

My browser (firefox) prevents any popup from loading, and loads links that open new windows in the current tab, unless I explicitly say I want the link to load on a new tab or window, with the appropriate shortcuts (for example, middle click on the link, or left click with ctrl pressed causes the link to open on a new tab, and shift + left click on a new window).
I would like to create a javascript function f() that runs some code (meant to create the link address) when the link is pressed, and then loads the link that has been created, without removing the user experience described above.
Right now what I have is something like <a href="javascript:void(0)" onclick="f()"/>, but middle click doesn't work (it instead loads the url javascript:void(0)) and neither do the other features described above.
Do you have any idea as how to solve my problem ?
Thanks.
have you tried window.open('url')?
see: http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
Also, as far as I know, you can't control whether or not the browser opens in a new tab or new window. That is a browser setting that is different for every user.
You might also try removing the onclick, and using
EDIT
There seems to be issues with using middle click with opening new tabs instead of executing the javascript: middle click (new tabs) and javascript links
As that site says, you can instead create an id for the element and bind it through javascript.
**Taken from that link:
...
And then in your JS, hook the link via it's ID to do the AJAX call.
Remember that you need to stop the click event from bubbling up. Most
frameworks have an event killer built in that you can call (just look
at its Event class).
Here's the event handling and event-killer in jquery:
$("#thisLink").click(function(ev, ob) {
alert("thisLink was clicked");
ev.stopPropagation();
});
Without jQuery, it might look like this:
document.getElementById('thisLink').onclick = function(e)
{
//do someting
e.stopPropagation();
}
Other browsers may vary, but by default Firefox doesn't tell the web page that it has been middle-clicked (unless you set the hidden preference to enable the feature). You might be able to create a workaround based on the focus and/or mouseover events instead.

Simulate real mouse click

What I want to do is execute a mouse click say on youtube to press play when the page loads. How do I click that specific location (assuming it is always in the same location)?
I have tried and failed with
var e = document.getElementById('myelem'); e.click();
var e = new jQuery.Event("click");e.pageX=x;e.pageY=y;$("#elem").trigger(e);
and stuff like that. nothing really works. Any suggestions? I am using google chrome
alright it seems like there has been a little confusion so I will further explain. I have created a popup tied to a keystroke event what I want to do is trigger x-webkit-speech by clicking the microphone that is in my popup so that the user does not have to click it themselves. I have tried a bunch of ways like above and have not been successful. After this my program will be done so I really would love some help thanks :]
In general, browsers won't let simulated mouse clicks trigger "real" actions, e.g. a jQuery click() won't cause the browser to follow a link. Otherwise, spammers could trigger banner clicks on every page load (among other more malicious uses).
According to http://www.filosophy.org/2011/03/talking-to-the-web-the-basics-of-html5-speech-input/:
Eventually, it will be possible to invoke the speech-recognition directly with the startSpeechInput() method, but to my knowledge this is not implemented in any of the current browsers.
I suggest waiting for Chrome to implement the API so that you can trigger speech input from JavaScript.
<button id="myButton" onClick="alert('You clicked me!');">Click me</button>
document.getElementById("myButton").click();
http://fiddle.jshell.net/Shaz/HgyeZ/
That's with regular clickable items though. But with YouTube Videos, you could also append &autoplay=1 to the end of the url (if it's embedded into a page).
http://fiddle.jshell.net/Shaz/tcMCa/

How can I force scripts to finish before leaving the page (in webkit browsers)?

This already works well in FireFox, IE and Opera, but in Chrome and Safari this is a problem. I have an onClick event function on links that leaves the page. These functions send requests to various tracking services to record the exit link.
I have tested this by removing the href attribute in the link. When it's removed, the link is tracked. When the link is active (and leads away from the page) the link is not tracked. This is only the case in Chrome and Safari.
I was hoping there was some non-extreme way of forcing the browser to finish the script before leaving the page. (By extreme I mean f.inst. removing the href attribute using javascript and manually redirecting the browser after tracking is complete)
jQuery is already loaded in this project, so it'd be great if it had a solution.
Thanks for any and all advice
Google analytics _trackPageView does not offer a callback so you have no easy way to get a success callback, then proceed to your next page. There is a callback though on _trackEvent, and that's triggered each time some GA event occurs. You can try this and listen for it like so (make sure to put your href's back into your links - this depends on that being there, plus you'll get graceful degradation):
$(".myLinkClass").click(function(e){
e.preventDefault();
var link = $(this).attr('href');
pageTracker._trackPageview('/outbound/'+link);
if (pageTracker._trackEvent("Outbound", "URL", link)) {
window.location = link;
}
});

Open new window after a click event not working in Safari, Chrome

I'm trying to open a new window like so:
$('#wrapper').click(function() {
window.setTimeout(function() {
//alert('hi');
window.open("http://example.com", "ExternalLinks", "resizable=yes, scrollbars=yes, status=yes");
}, 1000);
});
This works in Firefox, but not in Chrome or Safari (so far, I've just tested on a Mac). The alert() works in all browsers, so there seems to be something preventing the window.open from executing in Safari/Chrome. Furthermore, if I remove the setTimeout and just call the window.open then it does work in all 3 browsers. It's almost like if the window.open is nested too far away from the click event, then it doesn't work in Safari/Chrome.
So you know, I have an all-Flash website and I'm trying to get external links to open in a new window, so I'm reading the hash tag in the URL (ex. htp://example.com/#/facebook/) and if it matches certain items, then I'm calling window.open to open a specific URL. I don't have access to the Flash source, or I would handle this there.
Any ideas?
Safari/Chrome have built-in pop-up blockers that stop this from working. The only javascript that is allowed to open a new window in Safari/Chrome is javascript directly attached to click handlers (and other direct user input handlers). In past versions people figured out some ways to cheat (like generating some other element -- a form or div -- and simulating user input with javascript), but newer versions are smarter about detecting this. I'd recommend re-configuring things so that you don't use a delayed pop-up -- that is the kind of thing that can generally be jarring to a user after all.
I got around this by checking the return value of window.open() for undefined. If that is true call alert() with a message for the user to to disable their popup blocker.
var myWin = window.open([args]);
if (myWin == undefined)
alert('Please disable your popup blocker');
Another workaround
Just open a popup with ACCEPT and CANCEL options and attach the window.open action to the ACCEPT button and it will works. It worked for me...

Categories