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>
Related
This is my code:
var links = document.querySelectorAll ("a");
for (let i = 0; i <links.length; i++) {
links[i].setAttribute("target", "_self");
}
My goal, obviously, is to have all the links open on the current page, but only some of them become _self and the rest remain _blank, why?
I'm providing you 2 ways to achieve what you want :
First code is what you provided, and the second one is an other way to add _self attribute value on links.
let links = document.querySelectorAll ("a");
for (let i = 0; i <links.length; i++) { //1st way
links[i].setAttribute("target", "_self");
}
links.forEach(link => { //2nd way
link.target = "_self";
});
<body>
Youtube
Google
Twitter
Netflix
</body>
To append:
_target="_blank"
To all links in an HTML page I use:
var links = document.querySelectorAll("a");
for (var i=0;i<links.length;i++) {
links[i].target="_blank";
}
But for some reason, when I use the exact same code and try to append:
onclick="alert(2)"
Like so:
var links = document.querySelectorAll("a");
for (var i=0;i<links.length;i++) {
links[i].onclick="alert(2)";
}
It does not work.
Can anyone show me how to do this? (preferably in javascript instead of jQuery)
thanks!
You can use your original query with a slight modification:
var links = document.querySelectorAll("a");
for (var i=0;i<links.length;i++) {
links[i].onclick=function() { alert(2) };
}
Try
links[i].onclick = function() { alert(2); };
As other answers show, the onclick property should contain a function. If you really want to assign a Javascript code string, you can do it with setAttribute.
var links = document.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
links[i].setAttribute('onclick', "alert(2)");
}
Link 1
Link 2
Link 3
Link 4
Helllo guys I have a read more link in my page but I want to change its link via javascrpt. I am having this link http://london/wa/al/Lists/Announcements/DispForm.aspx?ID=4 but this link does not work anymore and I do not have access to html anymore. So I need to change it to the following http://london/wa/meridianexpress/Lists/Announcements/DispForm.aspx?ID=4
how can I make this?
Perhaps you can try this:
window.onload = function ()
{
var allLinksOnPage = document.getElementsByTagName("a");
for (var i = 0; i < allLinksOnPage.length; i++) {
if (allLinksOnPage[i].href == 'http://london/wa/al/Lists/Announcements/DispForm.aspx?ID=4')
allLinksOnPage[i].href = 'http://london/wa/meridianexpress/Lists/Announcements/DispForm.aspx?ID=4';
}
}
Hope this will help...
you can add below line in any existing onload function or create one as below in any script file which you have access and already included in html
window.onload = function(){
document.getElementById("more").href="xyz.php";
}
Try this:
document.getElementById("yourhtmllikid").setAttribute("href", "http:...");
I am looking for a way how to open few links in new tabs by one click.
Here is some HTML-code I wrote.
<ul>
<li>Google</li>
<li>Bing</li>
<li>Ebay</li>
<li>Amazon</li>
</ul>
<hr>
Open all links above by one click!
UPD: If it is possible, it would be great if it will search all links on a page wrapped with <li></li>, push them to array, and after a click link should open next 4 links from array.
jsFiddle example
Without questioning your motives (because you will be blocked by the popup blocker),
function open4links () {
var links = ['http://...', 'http://...', 'http://...', 'http://...'];
for (var i = 0; i < links.length; i++) {
window.open(links[i], '_blank');
}
}
(the a element).onclick = open4links;
Here, this works for me (based on the updated request): http://jsfiddle.net/R7qFv/4/
This keeps track of which links have been opened, so each time you click the link, it will open the next 4 in the list.
$("#openlinks").on("click", (function(){
var count = 0, nAtOnce = 4, $links = $("li a");
var openLinks = function(){
for (var i = 0; i < nAtOnce && count < $links.length; i++) {
window.open($links.eq(count++).attr("href"), '_blank');
}
};
return openLinks;
})());
I wrote it using jQuery because it's easier for me, but I'm sure you can translate if needed.
using window.open:
$('a').click(function(e) {
e.preventDefault();
$('li a').each(function(){
window.open($(this).attr("href"), '_blank');
});
});
As you can see in the JsFiddle, most browsers won't accept this because it is considered spam.
Use this to find all links in your html code and open in other window
<script type="text/javascript">
function OpenLinks(){
var arr = [];
$("#list a").each(function(){
arr.push(jQuery(this).attr("href"));
});
for(var i =0; i < arr.length;i++){
window.open(arr[i]);
}
}
</script>
obs: use jquery!
After searching Google and Stack Overflow I decided to ask if this is even possible.
Currently I am loading an iFrame on my site. I wish to hide a certain element loaded in the iFrame.
<span id="blahblah">
function collapseAll(){
var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
span = spans[i];
if(span.class=='blahblah'){
span.style.visibility = "hidden";
}
}
}
However this did not work. Question number one is can this be done? If yes could you explain how?
Thank you kindly.
You'll have to put that script inside the contents of the iframe. You can't access the DOM of another frame, especially if it's from another domain.
Sorry, but you cannot access elements within an iframe from the outer window, due to security controls.
You would have to try this, but you might be able to create a function on the window object of the iframe and the call it from the outer window.
In the iframe:
<script type="text/javascript">
window.collapseAll = function() {
.....
}
</script>
In the outer window:
<script type="text/javascript">
function doCollapse() {
document.getElementById('my_iframe").window.collapseAll();
}
</script>
Again, that's untested but I'm pretty sure Facebook does something similar to that.
if the iframe is from the same domain as your javascript is from then this is doable.
using plain javascript you would write the following
`
function collapseAll(){
var body = document.getElementById('body');
var spans = body.getElementsByTagName("span");
var span;
for (i = 0; i < spans.length; i++){
span = spans[i];
if(span.class=='blahblah'){
**span.style.display = "none";**
}
}
}
this fixes the issue.
if the iframe is from a different site (domain) then things would get really difficult..
there are solutions like greasemonkey which can operate on pages from different domains.
you can try
document.frame.document.getElementsByTagName('span')
<script type="text/javascript">
function remove_elemment() {
var body = document.getElementById('body');
var divs = body.getElementsByTagName("div");
var div;
for (i = 0; i < divs.length; i++){
div = divs[i];
if(div.class=='buybox'){
**div.style.display = "none";**
}
}
};
function doRemove() {
document.frame.document.getElementById('my_iframe').remove_elemment();
}();
</script>
<div class="floating-widget">
<iframe id="my_iframe" src="http://www.nodebeginner.org/index-vi.html" frameborder="0" width="100%" height="500">
</iframe>
</div>