OBSERVED BEHAVIOR
I am using a website that displays a location on the page.
Example: San Francisco, CA \ Orlando, FL \ etc.
Like the text in the above example the location is static
and does not do anything.
<span class="userinfo2015-basics-asl-location">Orlando, FL</span>
To bring more life to the page and add functionality to that location, I installed GreaseMonkey which allows a user to create scripts that modifies the functionality of a page. Unfortunately the script was outdated and didn't work. But the code seems to be on the right track.
var locE = document.getElementById('span.userinfo2015-basic-asl-location');
var location = locE.textContent;
var newSrc = "https://www.google.com/maps/place/"+location;
var link = document.createElement('a');
link.setAttribute("href",newSrc);
link.setAttribute("target","_blank");
link.innerHTML = location;
locE.parentNode.replaceChild(link,locE);
EXPECTED BEHAVIOR
The GreaseMonkey script would make the static location that you saw above into a link that redirects you to Google Maps.
RELEVANT INFORMATION
Using Greasemonkey Version 3.8
Using FireFox Version 47.0
Some things to correct:
To find the element you should in your case not use getElementById, as that would need an id. Instead use querySelector;
the class name you specify is not the same as in the HTML code: -basics- has an s at the end;
don't use location as a variable name, as that is a reserved property of the global object. Use something like newLocation;
when adding a string to a URL, special characters (like &, / and =) should be escaped. You can use encodeURIComponent for that;
not really an error, but it is better to assign text to textContent than to innerHTML, as it not really is HTML you are assigning.
// use querySelector
var locE = document.querySelector('span.userinfo2015-basics-asl-location');
// don't use location as variable name.
var newLocation = locE.textContent;
// use encodeURIComponent
var newSrc = "https://www.google.com/maps/place/"
+ encodeURIComponent(newLocation);
var link = document.createElement('a');
link.setAttribute("href",newSrc);
link.setAttribute("target","_blank");
link.textContent = newLocation; // use textContent
locE.parentNode.replaceChild(link,locE);
<span class="userinfo2015-basics-asl-location">Orlando, FL</span>
It should work with a few changes:
It looks like you misspelled your class name.
You need to use getElementsByClassName()[0] to get an element by class name.
I had some trouble getting this to work in the snippet, but I got it to work in JSFiddle:
JSFiddle: Span to Link
Here's the modified JavaScript:
var locE = document.getElementsByClassName('userinfo2015-basics-asl-location')[0];
var location = locE.textContent;
var newSrc = "https://www.google.com/maps/place/" + location;
var link = document.createElement('a');
link.setAttribute("href", newSrc);
link.setAttribute("target", "_blank");
link.innerHTML = location;
locE.parentNode.replaceChild(link, locE);
Related
I want to create a bookmarklet that will take something like this;
http://www.site1.com/some/random/path/12345
And change it into this, then reload the page;
http://www.site1.com/new/path12345?value=true
Unfortunately I haven't tried much, because I know absolutely nothing about Javascript. I tried to copy a bit of code that does a search and replace on the URL and then tried to add the functions for appending a string, but that didn't work because I had no idea what I was doing or even the proper syntax I was supposed to use. Javascript seems to have about a dozen different ways to alter the current URL and I have no idea when to use each one.
try this,
var urlArray = [];
var myURL= http://www.site1.com/some/random/path/12345;
urlArray = myURL.split('/');
var newURL = "http://www.site1.com/new/"+urlArray[urlArray.length-2]+""+urlArray[urlArray.length-1] +""+"?value=true";
var myPageLink = document.createElement('a');
myPageLink .setAttribute('target', '_blank');
myPageLink .href = newURL;
document.body.appendChild(myPageLink );
myPageLink .click();
So it's kind of a dumb question but I'm really wondering how I can make this :
user type www.mydomaine.com/something
page display : something
and it does with anything he type after the domain name
I've no idea how I could do that. I know I can get an info from an URL with jQuery but how can i remove the thing like index.html in the url? My guess would be with the htaccess?
Also, there won't be any other page but this with some design, how can I make sure someone doesn't go anywhere else but on the page that display what he wrote after the domain name?
I hope that's clear, thanks for reading and your answers !
Pierre
When creating an anchor tag and adding an href (or making a URL) I needed the URL to have a protocol (http or https), so I made a validation to add it, and then you can access the parameters of the URL easier.
Also, if you want to remove the / from the pathname you can use a .replace('/', '') when using parser.pathname
For removing index.html from the URL, you can split the path and get only the first element, or the ones you need f.e. parser.pathname.split('/')[0]
var myUrl = "www.mydomaine.com/something"
if (!myUrl.startsWith('http')) myUrl = 'http://' + myUrl;
var parser = document.createElement('a');
parser.href = myUrl;
console.log(parser.pathname);
// Other option
var theUrl = new URL(myUrl);
console.log(theUrl.pathname);
I used this as a reference.
I have this URL and wanting to know how can I remove this section from it via a jQuery event.
Need to remove:
&activities_id=13&session_id=14&back=1
Original URL:
http://somedomain.com/ijob-css/index.php/search/default/index/area/act?query=&activities_id=13&session_id=14&back=1
EDIT
Sorry i think i havent included the most important section. I should change the Address BAR url not a normal string.
for example, if i have this url in the address bar - http://somedomain.com/ijob-css/index.php/ after change, address bar should contain http://somedomain.com/xxx=111, without page refreshing.
Do you mean you want the URL without the query parameter part? If then see if this helps.
var test = 'http://somedomain.com/ijob-css/index.php/search/default/index/area/act?query=&activities_id=13&session_id=14&back=1';
alert(test.substring(0, test.indexOf('?')));
If you want until first query parameter name then just seek until index of &
Update :
If you are using HTML5 then what you ask is possible. Check browser history manipulation. You can find details about this here.
I believe replaceState() is the answer for your problem. However it is not supported in all browsers/versions. History.js wraps HTML5 state features and provides additional support for HTML4 browsers.
Try this out
var new_url = old_url.substring(0, old_url.indexOf('&'));
Example: http://jsfiddle.net/SjrqF/
var url = 'youtube.com/watch?v=3sZOD3xKL0Y&feature=youtube_gdata';
url = url.slice( 0, url.indexOf('&') );
or:
Example: http://jsfiddle.net/SjrqF/1/
var url = 'youtube.com/watch?v=3sZOD3xKL0Y&feature=youtube_gdata';
url = url.split( '&' )[0];
var lastPart = 'query=';
var url = 'http://somedomain.com/ijob-css/index.php/search/default/index/area/act?query=&activities_id=13&session_id=14&back=1'.split(lastPart)[0] + lastPart;
var index = original_url.indexOf("=");
var new_url = original_url.substring(0,index+1);
See below.
var positionToSubstring = this.location.href.indexOf('&');
var newURI = this.location.href.substring(0, positionToSubstring);
use this
var test='http://somedomain.com/ijob-css/index.php/search/default/index/area/act?query=&activities_id=13&session_id=14&back=1';
test=test.split('&')[0];
console.log(test);
outputs
http://somedomain.com/ijob-css/index.php/search/default/index/area/act?query=
I'm using jquery to rewrite a list of links on the page. If the location.host is NOT the vendor location.host AND the cookie isn't set to a specific value then it locates the links and rewrites them to the alternate values. The code I'm using works great in FF but not in IE7. Please help!
<script type="text/javascript">
// link hider
var hostadd = location.host;
var vendor = '172.29.132.34';
var localaccess = 'internal.na.internal.com';
var unlock = 'http://internal.na.internal.com/Learning/Customer_Care/navigation/newhire.html';
// link rewriter
$(document).ready (
function style_switcher(){
//if not a vendor or not accessing from lms reroute user to lms
if (hostadd != vendor && $.cookie("unlockCookie") != unlock){
var linkData = {
"https://www.somesite.com": "https://internalsite.com/something",'../Compliance/something/index.html':'../somethingelse.html'
};
$("a").each(function() {
var link = this.getAttribute("href"); // use getAttribute to get what was actualy in the page, perhaps not fully qualified
if (linkData[link]) {
this.href = linkData[link];
}
});
}
});
</script>
What you could do, if you insert the links dynamic, is store them in a data attribute like data-orglink="yourlink" which wouldnt be transformed by the browser, then check on that -and if its in the object array - change the href. Do you have access to creating the data attribute?
IE7 have problems with internal links, because it puts the host info on, before JS can reach the link..
http://jsfiddle.net/Cvj8C/9/
Will work in all, but IE7. So you need to use full paths if to use JS for this function :(
You had some errors in your JS.
But it seems to work fine?
See: http://jsfiddle.net/s4XmP/
or am i missing something? :)
Using Javascript in a firefox extension, I have opened a new tab. I am unaware of how I can write a link to www.google.com and other links (a whole list) in this tab, where the user can click a link and this page will open.
Thank you for your help
so far I had typed in :
var newTabBrowser2 = gBrowser.getBrowserForTab(gBrowser.selectedTab = gBrowser.addTab());
Unfortunately this won't work:
var newTabBrowser2 = gBrowser.getBrowserForTab(gBrowser.selectedTab = gBrowser.addTab());
newdocument=newTabBrowser2.contentDocument.documentElement.textContent;
newdocument.write("google<br>");
newdocument.write("yahoo<br>");
and I've tried this:
var newTabBrowser2 = gBrowser.getBrowserForTab(gBrowser.selectedTab = gBrowser.addTab());
newTabBrowser2.contentDocument.documentElement.innerHTML += "<a
href=\"http://www.google.com\">google";
but that only works when I use the debugger
Any idea why?
Thanks
It's not very clear from your question what you want. Maybe something like:
newwindow=window.open();
newdocument=newwindow.document;
newdocument.write("google<br>");
newdocument.write("yahoo<br>");
newdocument.close();
???
I don't believe you can use textContent to add HTML content to a document - you're possibly better off using the DOM to construct the HTML.
How about something like this (untested):
var newTabBrowser2 = gBrowser.getBrowserForTab(gBrowser.selectedTab = gBrowser.addTab());
newdocument=newTabBrowser2.contentDocument.documentElement;
var link=newdocument.createElement("a");
link.setAttribute("href", "http://www.google.com");
link.textContent="google";
newdocument.appendChild(link);
newdocument.appendChild(newdocument.createElement("br"));
link=newdocument.createElement("a");
link.setAttribute("href", "http://www.yahoo.com");
link.textContent="yahoo";
newdocument.appendChild(link);
newdocument.appendChild(newdocument.createElement("br"));
Alternatively, it may be possible to just write to the innerHtml of the document element.
This looks like the sort of thing you're looking for.
http://mesh.typepad.com/blog/2004/11/creating_a_new_.html
var myUrl = "http://mesh.typepad.com";
var tBrowser = document.getElementById("content");
var tab = tBrowser.addTab(myUrl);
This creates a new tab every time it's run - you can update the url of a pre-existing tab like this:
var uri = "http://mesh.typepad.com";
tBrowser.getBrowserForTab(tab).loadURI(uri);
Finally, you should be able to set the focus to the new tab:
tBrowser.selectedTab = tab;