Retrieve current focused/mouse-overed hyperlink URL - javascript

I'm working on an extension that I need to find a way to catch the current focused link.
When we hit TAB Key, or mouse over a hyperlink, we can see in the status bar (right side of the address bar for firefox 4+) the URL of that link has been shown.
How do you capture this URL with Javascript in Add-on online builder? how do I store it into a variable and whenever the focused link is changed, the variable value will be updated accordingly? I searched internet for hours and so far found this function called Document.activeElement.href ?? But I'm not sure that's what I need and if it is, how do I use it?
Please help!
Thanks !!!

This should do the trick:
<html><body>
link 1
link 2
<div id="output"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
var handler = function() {
jQuery('#output').text( jQuery(this).attr('href') );
};
jQuery('a').focus(handler).mouseover(handler);
</script>
</body></html>
Let me know if you don't want to use jQuery, and I'll re-write my answer.

The variable window.XULBrowserWindow.overLink happens to contain the current hovered URL as shown in the status bar but it doesn't save the actual element being hovered.

http://jsfiddle.net/DmX5j/6/
var links = document.getElementsByTagName('a'),
linkDisplay = document.getElementById('currentLink'),
currentLink;
for(var i =0; i < links.length; i++){
links[i].onfocus = function(){updateLink(this.href)};
links[i].onmouseover = function(){updateLink(this.href)};
}
function updateLink(link){
currentLink = link;
linkDisplay.innerHTML = currentLink;
}
pure JS way. Not sure if this is what you are looking for or not, basically on focus or mouseover the current link is updated.

you will need to put event handlers on all links of the interest, this is quite easy using jQuery, when the event trigger you can capture the href attribute and process accordingly

Related

Linking bookmarklet with site's bookmark [duplicate]

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

preventDefault, make changes and continue routine

I have a small site with a script that runs a query with mysql and returns me some data, including domains. These domains are generated html links and I want to change in javascript, since I can not access the part of php, but yes to the javascript and css code.
I just want you the code is run when the click event is triggered on a link. I tried to stop the execution by default and make a change, but my code does not open the page. If I remove preventDefault only works in firefox, but I have not chrome. (window.open not use, I want to change the original link).
var domains = document.getElementsByClassName("domain");
for(var x = 0; x < domains.length; x++){
if(domains[x].addEventListener) {
domains[x].addEventListener("click", changeLink, "false");
} else if(domains[x].attachEvent) {
domains[x].attachEvent("onclick", changeLink);
}
}
function changeLink(evt){
var urlOriginal = this.href;
// If I remove preventDefault, the function runs correctly on firefox but not in chrome
evt.preventDefault();
if(urlOriginal != 'http://google.com') {
urlOriginal = urlOriginal.replace(/http:\/\//g, '');
evt.stopPropagation();
this.href = 'http://intodns.com/' + urlOriginal;
console.log('Okay !');
}
return true;
}
I tried several changes but none is running, not really the case.
Does anyone know the cause of malfunction? How I can fix it without window.open?
Thanks
try stopPropagation instead
http://api.jquery.com/event.stoppropagation/ - read more about it
If I understand correctly, you want to redirect the user to a different link, instead of the one that is set in the href attribute.
Once the click is made, nothing will happen if you change the href attribute of the element. What you are looking for is redirecting the user, and this is made possible by modifying the location object which resides on window.
Instead of this line:
this.href = 'http://intodns.com/' + urlOriginal;
Try this:
window.location = 'http://intodns.com/' + urlOriginal;

Javascript Help For Chrome Console? Clicking All links website

this website wants me to click ALL the links on the page (there's about 2000).
This is the code for each link:
UNFOLLOW
the ID changes all the time depending on the link.
Is it possible to supply me the javascript code to write into the console of google chrome to click ALL the "a" tags with the class of "unfollow" at once? thanks :)
How about?
var links = document.querySelectorAll("a.unfollow[href=#]");
for (var i = 0; i < links.length; ++i) {
links[i].click();
}
Sure is:
[].forEach.call(document.querySelectorAll('a.unfollow'), function (link){
link.click();
});
Demo
You could do it using a plain for loop as well, but I just found it faster to do it this way.
Thanks I used chat room this code works easy: $('a.unfollow').click()

Call Javascript function from URL/address bar

Is it possible to call a javascript function from the URL? I am basically trying to leverage JS methods in a page I don't have access to the source.
Something like: http://www.example.com/mypage.aspx?javascript:printHelloWorld()
I know if you put javascript:alert("Hello World"); into the address bar it will work.
I suspect the answer to this is no but, just wondered if there was a way to do it.
There isn't from a hyperlink, no. Not unless the page has script inside specifically for this and it's checking for some parameter....but for your question, no, there's no built-in support in browsers for this.
There are however bookmarklets you can bookmark to quickly run JavaScript functions from your address bar; not sure if that meets your needs, but it's as close as it gets.
You can use Data URIs.
For example:
data:text/html,<script>alert('hi');</script>
For more information visit: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
Write in address bar
javascript:alert("hi");
Make sure you write in the beginning: javascript:
/test.html#alert('heello')
test.html
<button onClick="eval(document.location.hash.substring(1))">do it</button>
you may also place the followinng
<a href='javascript:alert("hello world!");'>Click me</a>
to your html-code, and when you click on 'Click me' hyperlink, javascript will appear in url-bar and Alert dialog will show
About the window.location.hash property:
Return the anchor part of a URL.
Example 1:
//Assume that the current URL is
var URL = "http://www.example.com/test.htm#part2";
var x = window.location.hash;
//The result of x will be:
x = "#part2"
Exmaple 2:
$(function(){
setTimeout(function(){
var id = document.location.hash;
$(id).click().blur();
}, 200);
})
Example 3:
var hash = "#search" || window.location.hash;
window.location.hash = hash;
switch(hash){
case "#search":
selectPanel("pnlSearch");
break;
case "#advsearch":
case "#admin":
}
Using Eddy's answer worked very well as I had kind of the same problem.
Just call your url with the parameters : "www.mypage.html#myAnchor"
Then, in mypage.html :
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length > 0){
// your action with the hash
}
});
you can use like this situation:
for example, you have a page: http://www.example.com/page.php
then in that page.php, insert this code:
if (!empty($_GET['doaction']) && $_GET['doaction'] == blabla ){
echo '<script>alert("hello");</script>';
}
then, whenever you visit this url: http://www.example.com/page.php?doaction=blabla
then the alert will be automatically called.
Just use:
(function() {
var a = document.createElement("script");
a.type = "text/javascript";
a.src = "http://www.example.com/helloworld.js?" + Math.random();
document.getElementsByTagName("head")[0].appendChild(a)
})();
This basically creates a new JavaScript line in the head of the HTML to load the JavaScript URL you wish on the page itself. This seems more like what you were asking for. You can also change the a.src to the actual code, but for longer functions and stuff it becomes a problem. The source link can also link to a JavaScript file on your computer if targeted that way.
No; because it would make links extremely dangerous.
you can execute javascript from url via events
Ex: www.something.com/home/save?id=12<body onload="alert(1)"></body>
does work if params in url are there.
There is a Chrome extension called Bookmarklet URL (no affiliation). To append a URL with JavaScript, so that the JavaScript command is executed just after loading the webpage, one can use ?bmlet=javascript:
Example: Display an alert box
https://github.com/?bmlet=javascript:alert("Hi");
Example: Enable spell-checking while editing a GitHub README file
[Obviously, a spelling checking extension must be originally available.]
https://github.com/<username>/<repositoryname>/edit/main/README.md?bmlet=javascript:document.getElementById("code-editor").setAttribute("spellcheck","true");
On some pages, it might take some time, as the JavaScript command runs after completely loading the page. Simple commands like alert("Hi"); should run quickly.
I am a student and I have just realized my school blocked JavaScript from the address bar. It works with the "a" tag on a .html file but not on the bar anymore. I am not asking for help, I would just like to share this.
You can do one thing that is you can first open the link www.example.com. Then you can search:
javascript:window.alert("Hello World!")

Disabling Paste option from the Context menu

I have one asp.net application, in which i have to disable or make it as read only to the Paste option from the context menu. But i searched in internet. I didn't get one exact method. Please help me for resolve this issue. Thanks in advance
The short answer is that you can't do this.
The user's browser is their own, and as such they have the sovereign power to interact with your page however they want. You can catch right-click events to prevent the menu from coming up; you can catch keypress events to stop Ctrl-V (and Shift-Insert, which is often forgotten) from being registered. However, you can't remove the Edit -> Paste menu option, which works within the browser and subverts Javascript altogether.
Not to mention that the user could just disable Javascript temporarily, paste into the field, then reenable Javascript if they wanted.
Even if you're happy with the limitations, you cannot modify the actual context menu, only prevent the right click from registering at all.
I suppose isn't possible to disable a single item on context menu, so I think you should try to disable the whole context menu, e.g.
$(document).bind("contextmenu", function(e) {
e.preventDefault();
});
∎ Another way of solving this pesky problem,
using JavaScript's Object-Oriented characteristics
<div class="ro-editable">
<span.....</...
<pre....</...
</div>
<script>
function make_editable_readonly(element){
element.backup_innerHTML = element.innerHTML; /* backup before editable. */
element.contenteditable = "true"; /* editable. CTRL+A is usable (FUN!) */
element.onautocomplete /* what in the world could change the content? actually lot!.. */
= element.onchange
= element.oncontextmenu
= element.oncopy
= element.oncuechange
= element.oncut
= element.ondrag
= element.ondragend
= element.ondrop
= element.onemptied
= element.onkeyup
= element.onmouseup
= element.onpaste
= element.onreset = function restore(){
if (element.innerHTML !== element.backup_innerHTML)
element.innerHTML = element.backup_innerHTML;
};
}
make_editable_readonly(
document.querySelector('div.ro-editable')
);
</script>
∎ Easy! Right? (and with no 💩y key-event "filtering" ☺):
∎ And here is a JSFiddle to play⚽ with
∎ taken from iCompile - ContentEditable And "ReadOnly"? YES! ☕

Categories

Resources