got this example:
<html>
<head>
<script type="text/javascript">
function init(){
var linkPage = document.getElementById('linkid').href;
window.location.href = linkPage;
}
onload=init;
</script>
</head>
<body>
GO HERE
</body>
</html>
this script clicks the link "GO HERE". (works perfect)
but in my example i got no class or id in the link.
LINK NAME
is only thing that never change is the name of the link ("LINK NAME")
is it possible to search for "LINK NAME" and then click it like the working script above?
or something that will do what i need :D
JS has no way to search for a node by text contents (that I know of).
Array.prototype.forEach.call(document.getElementsByTagName('a'), function (elem) {
if (elem.innerHTML.indexOf('LINK NAME') > -1) {
window.location = elem.href;
}
});
Iterate over the links in the document and check the text:
for(var i = 0, len = document.links.length; i < len; i += 1) {
if(document.links[i].textContent === "LINK TEXT") {
document.links[i].click();
}
}
I'd just use the following bit, which uses jquery selection.
var link = $("a:contains('LINK TEXT')"); //get the a
var click = document.createEvent("Event"); //create event
click.initEvent("click", true, true);
link.dispatchEvent(click); // make it happen
Related
I have a code that inserts a popunder into all the links on my page.
However, I need something that makes this popunder / tabunder run automatically, regardless of the click.
I've tried in many ways but I can't.
Can someone help me?
window.onload = function() {
var puURL = 'http://google.com';
var puTS = Math.round(+new Date()/1000);
console.log('T.'+localStorage.puTS+'/'+puTS);
if (typeof localStorage.puTS == 'undefined' || parseInt(localStorage.puTS) <= (puTS - 3600)) {
var links = document.getElementsByTagName('a');
for(var i = 0, len = links.length; i < len; i++) {
links[i].onclick = function (e) {
var puHref = this.getAttribute("href");
var puTarget = this.getAttribute("target");
if (puHref !== '#' && puHref !== 'javascript:void(0)') {
e.preventDefault();
if (puTarget == '_blank') {
window.open(window.location.href);
}
window.open(puHref);
window.location.href = puURL;
localStorage.puTS = puTS;
}
}
}
}
};
I have placed your script locally under the HEAD Tag section and the function is triggered when I open the HTML file. I assume that the issue lays in the script placement.
If your script is stored outside the project (is external), make sure that you navigate to the correct root and double-check for spelling. Here is an example:
index.html
<!DOCTYPE html>
<html>
<head>
<script src="project/javascript_folder/myscript.js"></script>
</head>
<body>
...
</body>
</html>
You can check out W3Schools File Paths for more detail.
If you open your browsers DEV-TOOLS (by pressing the Right-Click button on your mouse while you hover over the page) and navigate to the console section, you should see the successful output from your function:
In my case, it is T.undefined/... where "..." represents a randomly generated number in the length of 10.
In my html page I want to get html node on its href click.
example:
HTML FILE
<!DOCTYPE html>
<html>
<body>
<p>Click1</p>
<p>Click2</p>
</body>
</html>
When Click1 is clicked I want to value: W3
When Click2 is clicked I want to value: google
Currently, I am using document.documentElement.outerHTML to get complete html string and parse it. Is there a better way to get data-type value on a href click?
jQuery:
$('a').click(function(){ console.log( $(this).data('type') ) })
JavaScript:
var link = document.querySelectorAll('a');
for (var i = 0; i < link.length; i++) {
link[i].addEventListener('click', function(e) {
console.log(this.dataset.type)
});
}
i'm completely new to Javascript and I wanted to create an Greasemonkey Script that replaced "/text/othertext/" to "/text2/text3" on all the href elements of the document. That's what i came up with, and as expected, it doesn't work:
var links = document.getElementsByTagName('a');
for (i=0; i<links.length; i++)
{
var gethref = links[i].getAttribute('href');
gethref = gethref.replace(/text\/othertext/g,'text2\/text3');
links[i].setAttribute("href", gethref);
}
Thanks in advance!
Edit: ok, i know why my script is not working, but i don't know if it can be fixed, i'm trying to replace elements that load after the page is completely loaded (maybe with ajax?)
http://i.imgur.com/7n5V7Bi.png
This code works. Your code looks okay too. Perhaps you are loading the script before the document elements? Note how my elements are listed before my script:
link
link
<script>
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
href = href.replace('before', '#');
links[i].setAttribute('href', href);
}
</script>
Edit, based on your comments a dirty fix to cause delay in your app before running a script is to use the setTimeout function. To delay five seconds for example, you might use it like this:
link
link
<script>
setTimeout(function() {
var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
href = href.replace('before', '#');
links[i].setAttribute('href', href);
}
}, 5000); // < --- note the time in ms here
</script>
Not too sure why your code wouldn't be working.
I've put together the following snippet which might help.
(function() {
var anchors = document.querySelectorAll('a');
for(var i = 0; i < anchors.length; i++) {
var newHref = anchors[i].getAttribute('href').replace(/text\/othertext/g,'text2\/text3');
anchors[i].setAttribute('href', newHref);
}
}());
a {
display: block;
}
<!DOCTYPE html>
<head></head>
<body>
Some link
Some other link
</body>
If you run this snippet you'll see only one anchor is updated correctly as intended.
Hope that helps you out!
The easiest solution would be to wrap your code in this:
window.onload = function(){
/* your code here */
};
This will ensure that your code (especially if you've placed your script in the of the document, won't load until the whole page is loaded (including text, images, etc).
window.onload = function() {
document.body.innerHTML = document.body.innerHTML
.replace('<a href="text/othertext/"', '<a href="text2/text3"');
};
<!DOCTYPE html>
<head></head>
<body>
Some link
Some other link
</body>
I have the following script to create some hyperlinks which are numbers stored in an array. I want to be able to click those numbers and get the particular number to be shown in the alert box. I am able to see the links but when I click them I don't see any data.
<html>
<body>
<script type="text/javascript">
var str="732176086,732176085,735219154,735219155,23948614,23948629,23948628,764488973,764488974,764488975,23948631,732164301,732164304,732164305,732164303,732164302,732168040,832567989,832567988,807573121,807573120,765867299,831150154,831150153,23951065,23952295";
var str_array=str.split(',');
for(var i=0;i<str_array.length;i++)
{
controlRef = document.createElement('a');
var newLine=document.createElement('br');
document.body.appendChild(newLine);
controlRef.href = '#';
controlRef.innerHTML = str_array[i];
document.body.appendChild(controlRef);
}
controlRef.onclick = function () { alert(controlRef.innerHTML); };
</script>
</body>
</html>
Place the click handler inside of the for loop.
You also need to break the closure to controlRef. Otherwise the controlRef will point to the last element.
controlRef.onclick = (function(element) {
return function() {
alert(element.innerHTML);
};
})(controlRef);
jsFiddle.
Let's say a string contains http://google.com. When I linkify the whole string (that has both unlinked URLs and linked URLs, like the one shown above), it will become http://google.com">http://google.com</a>.
Is there a way to revert the incorrect links (which are the ones already linked before linkifying) back to http://google.com?
I found in WordPress, that it uses $ret = preg_replace("#(]+?>|>))]+?>([^>]+?)#i", "$1$3", $ret); (in wp-includes/formatting.php) to accomplish this. Can someone help me to do this in JavaScript?
Have a look at this http://jsfiddle.net/mplungjan/V5Qca/
<script>
function linkify(id,URL) {
var container = document.getElementById(id);
var links = container.getElementsByTagName("a");
if (links.length ==0) {
container.innerHTML=container.innerHTML.link(URL);
return;
}
var nodes = container.childNodes;
for (var i=nodes.length-1;i>=0;--i) {
if (nodes[i].nodeType ==3 && nodes[i].parentNode.nodeName!="A") {
var link = document.createElement("a");
link.href=URL;
link.innerHTML=nodes[i].nodeValue;
container.replaceChild(link, nodes[i]);
}
}
}
window.onload=function() {
linkify("div1","http://www.google.com/");
}
</script>
<div id="div1">
this is a test of replacing text with links with linkified content
</div>